Вернуться на предыдущую страницу

jQuery горизонтальное меню - это весьма полезный и популярный метод для вывода меню на твоем сайте.

Многие годы менялись способы вывода меню для сайта, однако, в какой-то момент разработчики популярных сервисов пришли практически к единому способу вывода меню. Различные библиотеки участвуют в таком способе, но самой популярной на сегодняшний день, конечно же, является именно jQuery.

Выпадающее меню на jQuery легко организовать, используя следующие библиотеки (если у тебя уже добавлен jQuery на странице, то его выводить повторно не надо):

<script type="text/javascript" src="/menu/jquery.min.js"></script>
<script type="text/javascript" src="/menu/jqueryslidemenu.js"></script>

также необходимы задать CSS вид нашему меню, чтобы оно выглядело именно так, как этого требует клиент или же разработчик.

<link rel="stylesheet" type="text/css" href="/menu/jqueryslidemenu.css" />

Если ты фанат IE, то можешь сделать небольшой хак для более корректного отображения в IE 7:

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

Структура меню. Контейнер, в котором все это должно лежать имеет следующие id и class:

<div id="myslidemenu" class="jqueryslidemenu">ЗДЕСЬ КОД МЕНЮ</div>

Само меню выглядит обычно так:

<ul>
<li><a href="#">Справка</a></li>
<li><a href="#">О программе</a>
<ul>
<li><a href="#">Интерфейс </a></li>
<li><a href="#">Возможности</a></li>
<li><a href="#">Быстрые клавиши</a></li>
</ul>
</li>
<li><a href="#">Обучение</a>
<ul>
<li><a href="#">Уроки</a></li>
<li><a href="#">Видеоуроки</a>
<ul>
<li><a href="#">Работа с HTML</a></li>
<li><a href="#">Работа с CSS </a></li>
<li><a href="#">Работа с PHP</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Автоматизация</a></li>
<li><a href="#">Секреты</a></li>
</ul>
jQuery Slide Menu

Файлы jQuery Slide Menu:

Скачать jQuery Slide Menu
DEMO