Главная страница » Плагины » Навигация с помощью плагина jStackMenu

Навигация с помощью плагина jStackMenu

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

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

<ul>

<li><a href=""><span>Twitter</span><img src="icons/twitter-32x32.png" alt=""></a></li>

<li><a href=""><span>Google</span><img src="icons/digg-32x32.png" alt=""></a></li>

<li><a href=""><span>Facebook</span><img src="icons/facebook-32x32.png" alt=""></a></li>

<li><a href=""><span>Yahoo</span><img src="icons/reddit-32x32.png" alt=""></a></li>

<li><a href="" target="_blank"><span>Skype</span><img src="icons/stumbleupon-32x32.png" alt=""></a></li>

</ul>

</div>

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

$('ul.my-stack').jstackmenu();

$('span.toggle-stack').click( function(){

$('ul.my-stack').jstackmenu('toggle');

});

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

Методы:

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

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

$('#stackmenu').jstackmenu( 'toggle', function( event, menuElement ){

// Выполняем какие-либо операции после переключения

});

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

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

$('#stackmenu').jstackmenu( 'show', function( event, menuElement ){

// Выполняем какие-либо операции после вывода меню

});

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

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

$('#stackmenu').jstackmenu( 'hide', function( event, menuElement ){

// Выполняем какие-либо операции после скрытия меню

});

option Получаем или устанавливаем значение опции jStackmenu. Если [значение] не задано, то функция возвращает текущее значение опции.

.jstackmenu( ‘option’, имя_опции, [значение])

События:

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

$( '#stackmenu' ).jstackmenu( {

'show': function( event, menuElement ){