WEB лаборатория DLE » Другое для WEB » Разное и другое » Навигация с горизонтальным подменю
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2


    Последние комментарии
    ...
    HI-tech:
    0

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

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


    Простая навигация с горизонтальным подменю. В большинстве случаев такого же эффекта можно добиться на чистом 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>



    Скачать бесплатно

    Теги: javascript, jQuery, css

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.