DataLife Engine > Версия для печати > Sticky Footer — Скользящее футер меню

Хочу поделиться с вами красивым и функциональным меню. Применений найти ему можно массу, начиная от логин-меню и заканчивая выводом блоков с новостями. Как обычно, смотрим ДЕМО и поехали!

Обзор

Футер меня представлен в двух вариациях: фиксированной длинны и во всю ширину. Построен футер на CSS + JS. javascript используется для усовершенствования футера, как при наведении мыши на элементы или при клике. Это означает, что если в браузере отключен javascript, он будет прекрасно работать во всех браузерах, но без эффектов. Так же присутствуют некоторые CSS3 функции, такие как закругленные углы и тени текста, так, что если пользователь зайдет с какого нибудь Internet Explorer (версий 6, 7 и 8), функциональность футера не будет нарушена.

Установка:

1. Скачать один из двух типов футера (фиксированный или во всю ширину) по ссылке в конце темы.2. Залить файлы на сервер в папку шаблона согласно их иерархии, в случае замены (ну вряд ли конечно) сделать бекап файлов.

3. Открыть main.tpl и в head вставить:

$(document).ready(function($){   $('#footer').stickyFooter({ speed : 'fast', effect : 'hover_fade', showhidefooter : 'show', hide_speed : 1000, hide_delay : 2000        });});


Опции опишу ниже.4. В том же файле в низ вставляем:

{ include file="stickyfooter.tpl"}

5. Открываем stickyfooter.tpl и настраиваем под себя

6. Готово.

Настройка:

speed : ставим насколько быстро «drop ups» показывается. Варианты: slow, normal, fast или значение в миллисекундах, пример: speed : 500effect : Эффект показа «drop ups»: ‘hover_fade’, ‘hover_slide’, ‘hover_toggle’, ‘click_fade’, ‘click_slide’ или ‘click_toggle’showhidefooter : Футер может быть скрыт или открыт, когда страница загрузилась, ‘show’ его покажет, ну и соответственно ‘hide’ скроет. hide с параметрами:hide_speed : время (в миллисекундах) за которое футер «скрывается»hide_delay : время (в миллисекундах) через которое футер «скрывается»

Сайт автора: dark5ider.ru

Вернуться назад