Главная » 2011 » Октябрь » 23 » Меню с красивым эффектом увеличения через плагин jQDock (Javascript)
23.10.2011, 18:08

Меню с красивым эффектом увеличения через плагин jQDock





Меню с красивым эффектом увеличения через плагин jQDock на jQuery

ДЕМО МАТЕРИАЛА

После /head на нужных вам страницах вставляйте:
Code
<script type='text/javascript' src='/js/jquery.jqDock.min-3-.js'></script>
Далее сразу же после предыдущего кода вставляйте:

1) Для горизонтального меню с увеличением вниз:
Code
<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) Для горизонтального меню с увеличением по центру:
Code
<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) Для горизонтального меню с увеличением вниз:
Code
<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) Для вертикального меню с увеличением вправо:
Code
<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) Для вертикального меню с увеличением по центру:
Code
<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) Для вертикального меню с увеличением влево:
Code
<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>

Теперь код самого меню (Вставлять в то место, где хотите видеть отображение данного меню):
Code
<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 скрипт из прикреплённого архива

Всё.
Материал взят с сайта infoscript.ru
Теги: Скачать Меню с красивым эффектом увеличения через плагин jQDock
Скачать "Меню с красивым эффектом увеличения через плагин jQDock"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: siteforsites.ru
Категория: JavaScript's | Просмотров: 2873 | Добавил: manikom-auto | Рейтинг: 4.0/1 |
Теги: На, увеличения, через, красивым, эффектом, jQuery, плагин, меню, jQDock
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]