4 495 Скрипты / Menu & Nav

Навигация с горизонтальным подменю

Навигация с горизонтальным подменю

Простая навигация с горизонтальным подменю. В большинстве случаев такого же эффекта можно добиться на чистом CSS, но чтобы меню работало корректно и с IE6 добавим пару строк jQuery.

Ссылки помещенные внутри <span> - это наше горизонтальное подменю.

<ul id="topnav">
    <li><a href="#">Ссылка</a></li>
    <li>
        <a href="#">Ссылка</a>
        <!--Subnav Starts Here-->
        <span>
            <a href="#">Ссылка подменю</a> |
            <a href="#">Ссылка подменю</a> |
            <a href="#">Ссылка подменю</a>
        </span>
        <!--Subnav Ends Here-->
    </li>
    <li><a href="#">Ссылка</a></li>
</ul>

CSS

В отличии от регулярных выпадающих меню, где подменю непосредственно появляется по клику или наведению курсора на элемент списка, в нашем случае всё множество под меню будет отображаться в том же месте (выровненное по левому краю под навигацией).

Теперь установим абсолютное позиционирование на тег с отступом сверху на 35px. Мы добавили скругление углов в конце стиля - это не будет работать в старых версиях IE.

Фикс IE6 - jQuery

IE6 не обрабатывает li:hover (в основном понимает только a:hover), исправим это путём jQuery.
Подключаем сам jQuery.

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
И подключаем сценарий:
$(document).ready(function() {
    $("ul#topnav li").hover(function() { //Событие наведения на элемент списка
        $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Добавить фоновый цвет и изображение на элемент списка
        $(this).find("span").show(); //Показать подменю
    } , function() { //отсутсвие наведения...
        $(this).css({ 'background' : 'none'}); //Убрать фон
        $(this).find("span").hide(); //Скрыть подменю
    });
});
Скачать 1715Загрузок 2,46 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи