Главная » 2011 » Октябрь » 28 » Горизонтальное прокручивающееся меню на jQuery (Javascript)
28.10.2011, 13:29

Горизонтальное прокручивающееся меню на jQuery





Горизонтальное прокручивающееся меню на jQuery

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

Шаг 1.

Подключим к нашему документу фреймворк jQuery, специальный скрипт для меню и таблицу стилей, отвечающую за внешний вид меню.

Для этого пропишем следующий код между тегами head:
Code
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection"/>  

  <script type='text/javascript' language="javascript" src='js/jquery.js'></script>  

  <script type="text/javascript" language="javascript" src="js/jquery.dropdown.js"></script>

Шаг 2.

В нужном месте (где должно находится меню на сайте) вставим ненумерованный список такой структуры:
Code
<ul class="dropdown">  

  <li><a href="#">Высокое меню</a>  

  <ul class="sub_menu">  

  <li><a href="#">Artificial Turf</a></li>  

  <li><a href="#">Benches & Bleachers</a></li>  

  <li><a href="#">Communication Devices</a></li>  

  <li><a href="#">Dugouts</a></li>  

  <li><a href="#">Fencing & Windscreen</a></li>  

  <li><a href="#">Floor Protectors</a></li>  

  <li><a href="#">Foul Poles</a></li>  

  <li><a href="#">Netting</a></li>  

  <li><a href="#">Outdoor Furniture & Storage</a></li>  

  <li><a href="#">Outdoor Signs</a></li>  

  <li><a href="#">Padding</a></li>  

  </ul>  

  </li>  

  <li><a href="#">Среднее меню</a>  

  <ul class="sub_menu">  

  <li><a href="#">Artificial Turf</a></li>  

  <li><a href="#">Benches & Bleachers</a></li>  

  <li><a href="#">Communication Devices</a></li>  

  </ul>  

  </li>  

  <li><a href="#">Простое меню</a>  

  <ul class="sub_menu">  

  <li><a href="#">Artificial Turf</a></li>  

  <li><a href="#">Benches & Bleachers</a></li>  

  <li><a href="#">Communication Devices</a></li>  

  <li><a href="#">Dugouts</a></li>  

  <li><a href="#">Fencing & Windscreen</a></li>  

  </ul>  

  </li>  

  <li><a href="#">Без меню</a></li>  

  </ul>

Думаю, что структура этого меню понятна. Меню в целом придается класс dropdown выпадающему списку придается класс sub_menu.

При настройках скрипта по умолчанию меню будет анимироваться при наличии хотя бы 7 подпунктов, т.е. при высоте 400.

Это значение можно заменить на любое другое в файле скрипта jquery.dropdown.js в первой строке:
Code
var maxHeight = 400;
Если вам не нравится, что в IE6 стрелка отображается в сером квадратике из-за проблем с png, то можете пересохранить файл down-arrow.png в формате .jpg c соответствующим фоном.

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