Главная » Файлы » Прочие скрипты » jQuery

Простое выпадающее горизонтальное и вертикальное меню через плагин naviDropDown на jQuery для uCoz
23.06.14, 14:19:57

Скачать файл




Два варианта простого выпадающего меню - горизонтальный и вертикальный. Оченнь легко устанавливается и настраивается

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="/js/jquery.hoverIntent.minified.js"></script>
  <script type="text/javascript" src="/js/jquery.naviDropDown.1.0.js"></script>

  <script type="text/javascript">
  $(function(){  
  $('#navigation_horiz').naviDropDown({  
  dropDownWidth: '300px'  
  });  

  $('#navigation_vert').naviDropDown({  
  dropDownWidth: '300px',  
  orientation: 'vertical'  
  });  
  });  
  </script>


dropDownWidth: '300px' - ширина выпадающих подпунктов

Следующий код вставляйте сразу после предыдущего:
Код
<style type="text/css">  
/* navigation styles - BEGIN */

/* style for horizontal nav */
#navigation_horiz {width:950px; clear:both; padding:0 0 0 0; margin:0 auto}  
#navigation_horiz ul {height:50px; display:block}  
#navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative}  
#navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}  
#navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}  

/* style for vertical nav */
#navigation_vert {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}  
#navigation_vert ul {height:50px; display:block}  
#navigation_vert ul li {display:block; width:200px; height:50px; background:#999; margin:0 0 1px 0; position:relative}  
#navigation_vert ul li a.navlink {display:block; *display:inline-block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}  
#navigation_vert .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topright:10px}  

/* style for each drop down - horizontal */  
#navigation_horiz ul li #dropdown_one {background:#ccc; color:#fff}  
#navigation_horiz ul li #dropdown_one a {color:red}  
#navigation_horiz ul li #dropdown_two {background:#ccc; color:#fff}  
#navigation_horiz ul li #dropdown_two a {color:black}  

/* style for each drop down - vertical */  
#navigation_vert ul li #dropdown_four {background:#333; color:#fff}  
#navigation_vert ul li #dropdown_four a {color:red}  
#navigation_vert ul li #dropdown_five {background:#666; color:#fff}  
#navigation_vert ul li #dropdown_five a {color:black}  

/* navigation styles - END */
  </style>


Так как вы будете использовать лишь один вариант меню - горизонтальный или вертикальный - оставляйте лишь стиль для вашего варианта меню

Следующий код в то место, где будет само меню:

1) Горизонтальный вариант
Код
<div id="navigation_horiz">
  <ul>
  <li>
  <a href="" class="navlink">Пункт 1</a>
  <div class="dropdown" id="dropdown_one">
  Содержимое подпункта 1  
  </div>  
  </li>
  <li>
  <a href="" class="navlink">Пункт 2</a>
  <div class="dropdown" id="dropdown_two">
  Содержимое подпункта 2  
  </div>  
  </li>
  </ul>
  </div>


2) Вертикальный вариант:
Код
<div id="navigation_vert">
  <ul>
  <li>
  <a href="" class="navlink">Пункт 1</a>
  <div class="dropdown" id="dropdown_four">
  Содержимое подпункта 1  
  </div>  
  </li>
  <li>
  <a href="" class="navlink">Пункт 2</a>
  <div class="dropdown" id="dropdown_five">
  Содержимое подпункта 2  
  </div>  
  </li>
  </ul>
  </div>


Внимательно изучите стили и коды меню для того, чтобы иметь возможность адаптировать меню под свой дизайн

Осталось лишь залить три скрипта из прикреплённого архива в папку js

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: вертикальное, naviDropDown, Простое, горизонтальное, Через, на, плагин, JQuery, Меню, Выпадающее
Просмотров: 323 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: