Главная » Файлы » Прочие скрипты » 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
Категория: jQuery | Добавил: Apocalypse | Теги: Через, увеличения, делаем, на, плагин, JQuery, эффектом, красивым, jQDock, Меню
Просмотров: 268 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: