В данном уроке речь пойдет о организации навигации с помощью замечательного плагина jStackMenu. Данный плагин позволит создать эффект выпадающего меню, что напоминает навигацию MacOS. Смотрится достаточно красиво, в примере мы будем организовывать наши социальные закладки, это привлечет пользователей оригинальностью. Эффект раскрывается полностью в браузерах, которые поддерживают CSS трансформации. В других браузерах элементы меню выскакивают в линейном порядке. Вот что получилось..

 

Для начала нам необходимо подключить фреймворки, их необходимо разместить между тегами <head></head> 

Теперь организовываем структуру навигации, используя класс trigger:

Использовать плагин очень просто. Нужно организовать вызов метода .jstackmenu() для элемента, у которого есть наследники.

Плагин имеет следующие опции:

Методы:

    toggle Переключает видимость меню.

  • .jstackmenu( 'toggle', [switch], [callback] )
  • [switch]: переменная типа boolean, которая определяет состояние меню.
  • [callback]: возвратная функция, которая вызывается после выполнения переключения состояния меню.

 show Выводит меню.

  • .jstackmenu( ‘show’, [callback] )
  • [callback]: возвратная функция, которая вызывается после завершения вывода меню.

hide Скрывает меню.

  • .jstackmenu( ‘hide’, [callback] )
  • [callback]: возвратная функция, которая вызывается после завершения скрытия меню.

option Получаем или устанавливаем значение опции jStackmenu. Если [значение] не задано, то функция возвращает текущее значение опции.
  • .jstackmenu( ‘option’, имя_опции, [значение])
События:
show Происходит после завершения анимации вывода меню.

hide Происходит после завершения анимации скрытия меню.

showBefore Происходит перед анимацией вывода меню.

hideBefore Происходит после завершения анимации скрытия меню.

Вот и все, в исходниках можно посмотреть стили, и подредактировать их в зависимости от необходимости.