|
Есть обычное меню, сделанное многоуровневым списком. Надо было сделать так, чтобы при наведении на основной пункт появлялись его подкатегории. Категория, в которой мы находимся сейчас, должна быть всегда открытой. Искать плагины не было никакого желания, поэтому решил написать свой вариант. На помощь пришел всем известный jQuery.
|
|
|
|
Пусть меню имеет примерно такой вид:
|
<div class = "menu">
<ul class="menu">
<li class="item4">
<a href="#"><span>Ссылка 1</span></a>
</li>
<li class="parent active item2">
<a href="#"><span>Ссылка 2</span></a>
<ul>
<li class="item31"><a href="#"><span>Ссылка 2.1</span></a></li>
<li id="current" class="active item37"><a href="#"><span>Ссылка 2.2</span></a></li>
</ul>
</li>
<li class="parent item5">
<a href="#"><span>Ссылка 3</span></a>
<ul>
<li class="item38"><a href="#"><span>Ссылка 3.1</span></a></li>
<li class="item39"><a href="#"><span>Ссылка 3.2</span></a></li>
</ul>
</li>
<li>
...
</li>
</ul>
</div>
|
|
В шапке страницы подключаем необходимые файлы:
|
<script type = "text/javascript" src = "jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="menu.css" type="text/css" />
|
|
Файл menu.css содержит настройки стиля меню (ниже будет ссылка на пример с меню).
|
|
Немного обьясню принцип работы: меню открывается при наведении на ссылку, а закрывается при убирании курсора с пункта li. Для наглядности сделал подсветку ссылок и обвел зоны li красными прямоугольниками.
|
|
В шапку страницы добавляем следующий JavaScript-код:
|
<script type = "text/javascript">
function hide_menu() {
jQuery("ul.menu li ul").css('display', 'none');
jQuery("li#current ul").css('display', 'list-item');
jQuery("li#current").parent().css('display', 'list-item');
jQuery("ul.menu li").hover(function() {
} , function() {
jQuery('ul:first', jQuery(this)).css('display', 'none');
jQuery("li#current ul").css('display', 'list-item');
jQuery("li#current").parent().css('display', 'list-item');
});
jQuery("ul.menu li a").hover(function() {
jQuery('ul:first', jQuery(this).parent()).css('display', 'list-item');
});
};
</script>
|
|
А сразу после обьявления нашего div.menu :
|
<script type = "text/javascript">
hide_menu();
</script>
|
|
Здесь Вы можете посмотреть пример работы скрипта с меню: Пример.
|
|
Аналогичное меню по структуре предлагает Joomla 1.5 (если в настройках меню выбрать Module Parameters - Menu Style - List), поэтому данный скрипт уже готов к интеграции на ее страницы.
|
|
Предложенный вариант работает во всех популярных браузерах (FireFox, Internet Explorer, Opera, Safari, Chrome).
|