2 140 Скрипты / Menu & Nav

Навигация с выпадающими пунктами


Навигация использующая jQuery плагины hoverIntent, easing и naviDropDown. Эффекты slideUp и slideDown можно установить самим.
В демке два примера с горизонтальным и вертикальным вариантом меню.

HTML

Рассмотрим сначала для горизонтального меню:

А теперь для вертикального:

CSS

CSS стили для горизонтального и вертикального варианта:

JS

Вызов плагина для обоих вариантов:

$(function(){
    
    $('#navigation_horiz').naviDropDown({
        dropDownWidth: '300px'
    });
    
    $('#navigation_vert').naviDropDown({
        dropDownWidth: '300px',
        orientation: 'vertical'
    });
}); 

Опции для плагина:

  • dropDownClass: 'dropdown', //название класса для выпадающего элемента
  • dropDownWidth: 'auto',  //по умолчанию ширина выпадающих элементов
  • slideDownEasing: 'easeInOutCirc', //метод easing для slideDown
  • slideUpEasing: 'easeInOutCirc', //метод easing для slideUp
  • slideDownDuration: 500, //продолжительность метода easing для slideDown
  • slideUpDuration: 500, //продолжительность метода easing для slideUp
  • orientation: 'horizontal' //ориентация - или 'horizontal' или 'vertical'
Скачать 627Загрузок 5,07 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи