12:52
Иногда нам нужно сделать на сайте длинный выпадающий список, но проблема в том, что пользователю придется прокручивать страницу вниз, если список будет очень длинный. Справиться с этой проблемой нам опять поможет 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 соответствующим фоном.
Думаю, это меню найдет свое место на Ваших сайтах. Спасибо за внимание.
