3.04.13, 00:23
2 комментарий
  DLE Хаки

Sticky Footer - Скользящее футер меню

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

Как обычно, смотрим ДЕМО и поехали!


Обзор

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

Установка:

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

<script type="text/javascript" src="{THEME}/js/hoverintent.js"></script>
<script type="text/javascript" src="{THEME}/js/footer.js"></script>

<script type="text/javascript">
$(document).ready(function($){
$('#footer').stickyFooter({
speed : 'fast',
effect : 'hover_fade',
showhidefooter : 'show',
hide_speed : 1000,
hide_delay : 2000
});
});
</script>


Опции опишу ниже.

4. В том же файле в низ вставляем:

{ include file="stickyfooter.tpl"}


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

Настройка:

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

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

СКАЧАТЬ

Вес файла
38.76 Kb

СКАЧАТЬ

Вес файла
39.78 Kb

Реклама

Комментарии

  1. NorDULaN Пользователь offline 9 июля 2013 17:25                    

    Аккаунт пользователя сайта заблокирован
    Если Вы являетесь владельцем сайта

    Убедитесь что у Вас оплачен хостинг

    sorry
    *(демо не работает)

  1. ToNik Пользователь offline 9 июля 2013 17:34                    

    Демо не работает по причине блокировки сайта автора хостером (скорее всего dark5ider в отпуске и не знает про это)

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204