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

17 апреля 2013, 01:00

Новости

13/09/2024 Samsung Galaxy S23 Ultra - флагман с высокими амбициями

13/09/2024 Полиграфическое оборудование для офиса

03/09/2024 Полиграфическое оборудование для офиса

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

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

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

ul#topnav {
    margin: 0; padding: 0;
    float: left;
    width: 970px;
    list-style: none;
    position: relative; /*--Установка относительного позиционирования на неупорядоченный список - не на элемент списка--*/
    font-size: 1.2em;
    background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
    float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555; /*--Разделитель для каждой ссылки верхнего уровня--*/
}
ul#topnav li a {
    padding: 10px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }

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

ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:35px;
    display: none; /*--Скрывать по умолчанию--*/
    width: 970px;
    background: #1376c9;
    color: #fff;
    /*--Нижнее правое закругление--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /*--Нижнее левое закругление--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Показывать подменю при наведении--*/
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

И подключаем сценарий:

<script type="text/javascript">
$(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(); //Скрыть подменю
    });
});
</script>

Яндекс.Диск