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

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

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


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



Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...