Все для веб-дизайнера
Навигация с помощью плагина jStackMenu
В данном уроке речь пойдет о организации навигации с помощью замечательного плагина jStackMenu. Данный плагин позволит создать эффект выпадающего меню, что напоминает навигацию MacOS. Смотрится достаточно красиво, в примере мы будем организовывать наши социальные закладки, это привлечет пользователей оригинальностью. Эффект раскрывается полностью в браузерах, которые поддерживают CSS трансформации. В других браузерах элементы меню выскакивают в линейном порядке. Вот что получилось..
Для начала нам необходимо подключить фреймворки, их необходимо разместить между тегами <head></head>
|
1 2 3 4 5 |
<script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery-ui-1.7.2.custom.js"></script> <script type="text/javascript" src="jquery-css-transform.js"></script> <script type="text/javascript" src="jquery-animate-css-rotate-scale.js"></script> <script type="text/javascript" src="jstackmenu.js"></script> |
Теперь организовываем структуру навигации, используя класс trigger:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="stack"> <div><img src="icons/heart-64x64.png" alt="share" /></div> <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> <li><a href="" target="_blank"><span>Blog</span><img src="icons/delicious-32x32.png" alt=""></a></li> <li><a href="" target="_blank"><span>RSS</span><img src="icons/flickr-32x32.png" alt=""></a></li> </ul> </div> |
Использовать плагин очень просто. Нужно организовать вызов метода .jstackmenu() для элемента, у которого есть наследники.
|
1 2 3 4 |
$('ul.my-stack').jstackmenu(); $('span.toggle-stack').click( function(){ $('ul.my-stack').jstackmenu('toggle'); }); |
Плагин имеет следующие опции:
Методы:
toggle Переключает видимость меню.
.jstackmenu( 'toggle', [switch], [callback] )[switch]: переменная типа boolean, которая определяет состояние меню.[callback]: возвратная функция, которая вызывается после выполнения переключения состояния меню.
|
1 2 3 |
$('#stackmenu').jstackmenu( 'toggle', function( event, menuElement ){ // Выполняем какие-либо операции после переключения }); |
show Выводит меню.
- .jstackmenu( ‘show’, [callback] )
[callback]: возвратная функция, которая вызывается после завершения вывода меню.
|
1 2 3 |
$('#stackmenu').jstackmenu( 'show', function( event, menuElement ){ // Выполняем какие-либо операции после вывода меню }); |
hide Скрывает меню.
- .jstackmenu( ‘hide’, [callback] )
[callback]: возвратная функция, которая вызывается после завершения скрытия меню.
|
1 2 3 |
$('#stackmenu').jstackmenu( 'hide', function( event, menuElement ){ // Выполняем какие-либо операции после скрытия меню }); |
option Получаем или устанавливаем значение опции jStackmenu. Если
[значение] не задано, то функция возвращает текущее значение опции.- .jstackmenu( ‘option’, имя_опции, [значение])
События:
show Происходит после завершения анимации вывода меню.
|
1 2 3 4 5 6 7 8 |
$( '#stackmenu' ).jstackmenu( { 'show': function( event, menuElement ){ // Выполняем какие-либо операции } } ); $( '#stackmenu' ).bind( ' jstackmenushow', function( event, menuElement ){ // Выполняем какие-либо операции } ); |
hide Происходит после завершения анимации скрытия меню.
|
1 2 3 4 5 6 7 8 |
$( '#stackmenu' ).jstackmenu( { 'hide': function( event, menuElement ){ // Выполняем какие-либо операции } } ); $( '#stackmenu' ).bind( ' jstackmenuhide', function( event, menuElement ){ // Выполняем какие-либо операции } ); |
showBefore Происходит перед анимацией вывода меню.
|
1 2 3 4 5 6 7 8 9 10 |
$( '#stackmenu' ).jstackmenu( { 'showBefore': function( event, menuElement ){ // Выполняем какие-либо операции } } );</pre> </div> <div> <pre>$( '#stackmenu' ).bind( ' jstackmenushowBefore', function( event, menuElement ){ // Выполняем какие-либо операции } ); |
hideBefore Происходит после завершения анимации скрытия меню.
|
1 2 3 4 5 6 7 8 |
$( '#stackmenu' ).jstackmenu( { 'hideBefore': function( event, menuElement ){ // Выполняем какие-либо операции } } ); $( '#stackmenu' ).bind( ' jstackmenuhideBefore', function( event, menuElement ){ // Выполняем какие-либо операции } ); |
Вот и все, в исходниках можно посмотреть стили, и подредактировать их в зависимости от необходимости.
| Опубликовал Cooper 06.09.2011 в 12:25, в категории Плагины. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
