| Главная » Файлы » Прочие скрипты » jQuery |
Делаем меню с красивым эффектом увеличения через плагин jQDock на jQuery
| 23.06.14, 08:16:57 | |
 Прекрасный плагин, который очень легко настраивается под любые нужды Для начала посмотрите ДЕМО Если демо вас впечатлило, переходим к установке: После /head на нужных вам страницах вставляйте: Код <script type='text/javascript' src='/js/jquery.jqDock.min-3-.js'></script> Далее сразу же после предыдущего кода вставляйте: 1) Для горизонтального меню с увеличением вниз: Код <script> jQuery(document).ready(function($){ // set up the options to be used for jqDock... var dockOptions = { align: 'top' // horizontal menu, with expansion DOWN from a fixed TOP edge , labels: true // add labels (defaults to 'bc') }; // ...and apply... $('#menu').jqDock(dockOptions); }); </script> 2) Для горизонтального меню с увеличением по центру: Код <script> jQuery(document).ready(function($){ // set up the options to be used for jqDock... var dockOptions = { align: 'middle' // horizontal menu, with expansion UP/DOWN from the middle , size: 36 // set the maximum minor axis (horizontal) image dimension to 36px , labels: 'tl' // add labels (override the 'tc' default) }; // ...and apply... $('#menu').jqDock(dockOptions); }); </script> 3) Для горизонтального меню с увеличением вниз: Код <script> jQuery(document).ready(function($){ // set up the options to be used for jqDock... var dockOptions = { align: 'top' // horizontal menu, with expansion DOWN from a fixed TOP edge , labels: true // add labels (defaults to 'bc') }; // ...and apply... $('#menu').jqDock(dockOptions); }); </script> 4) Для вертикального меню с увеличением вправо: Код <script> jQuery(document).ready(function($){ // set up the options to be used for jqDock... var dockOptions = { align: 'left' // vertical menu, with expansion RIGHT from a fixed LEFT edge , size: 60 // set the maximum minor axis (horizontal) image dimension to 60px }; // ...and apply... $('#menu').jqDock(dockOptions); }); </script> 5) Для вертикального меню с увеличением по центру: Код <script> jQuery(document).ready(function($){ // set up the options to be used for jqDock... var dockOptions = { align: 'center' // vertical menu, with expansion LEFT/RIGHT from the center , labels: 'br' // add labels (override the 'tc' default) , inactivity: 4000 // set inactivity timeout to 4 seconds }; // ...and apply... $('#menu').jqDock(dockOptions); }); </script> 6) Для вертикального меню с увеличением влево: Код <script> jQuery(document).ready(function($){ // set up the options to be used for jqDock... var dockOptions = { align: 'right' // vertical menu, with expansion LEFT from a fixed RIGHT edge , labels: true // add labels (defaults to 'tl') }; // ...and apply... $('#menu').jqDock(dockOptions); }); </script> Другие темы оформления данного меню вы можете найти на официальном сайте плагина, ссылку на который я предоставил в виде ДЕМО. Теперь код самого меню (Вставлять в то место, где хотите видеть отображение данного меню): Код <div id='menu'> <img src='Ссылка на картинку' title='Название / Описание' a/> <img src='Ссылка на картинку' title='Название / Описание' a/> <img src='Ссылка на картинку' title='Название / Описание' a/> <img src='Ссылка на картинку' title='Название / Описание' a/> <img src='Ссылка на картинку' title='Название / Описание' a/> </div> Теперь осталось лишь залить в папку js скрипт из прикреплённого архива Всё. Материал подготовил Apocalypse | |
| Просмотров: 442 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |