Принцип работы меню

maceraty · January 31, 2012

Здравствуйте. Подскажите, как работает это меню, а именно, каким образом происходит появление подменю, при наведении на элемент меню. А то что-то не доходит.

Моя ссылка

html

<html>
<head>

</head>
<body  style="background:#bbb;">
<div id="nav">

<ul class="select">
<li><a href="#"><b>1</b></a>
<ul class="sub">
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>

<ul class="current"> <!-- <<<== активное меню -->
<li><a href="#"><b>4</b></a></li>
</ul>
<ul class="sub_active"> <!-- <<<== активное подменю меню -->
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li class="current_sub"><a href="#">7</a></li> <!-- <<<== активная страница -->
<li><a href="#">8</a></li>
</ul>

<ul class="select">
<li><a href="#"><b>9</b></a>
<ul class="sub">
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

css

ul#nav {
    list-style-type:none; /* Отмена маркеров списка */
    margin:0;
    padding:0;
}

#nav {
    float:left;
    width:100%;
    height:75px; /* Высота всего меню (и верхнего уровня и нижнего, все вместе) */
    position:relative;
    margin:0; /* Отступ сверху и снизу от меню */
}

#nav .select, #nav .current {
    margin:0 10px;
    padding:0;
    list-style:none;
    display:block;
}

#nav li {
    display:inline;
    margin:0;
    padding:0;
    height:auto;
}

#nav .select a, #nav .current a {
    display:block;
    height:40px; /* Высота верхнего уровня */
    float:left;
    padding:0 0 0 5px;
    text-decoration:none;
    font:normal 18px Tahoma; /* Размер шрифта верхнего уровня */
    line-height:40px;
    white-space:nowrap;
    margin-right: 0; /* Отступы пунктов верхнего уровня */
    position: relative;
    z-index: 500;
}

#nav .select a b, #nav .current a b {
    height:100%;
    display:block;
    padding:0 10px 0 5px;
    color:#ffffff; /* Цвет ссылок верхнего уровня */
}

#nav .select a:hover, #nav .select li:hover a {
        cursor:pointer;
}

#nav .select a:hover b, #nav .select li:hover a b {
    color:#ffffff;
}

#nav .sub {
    display:none;
}

#nav .current a {
        background-image:url("images/left_nav.png");
        background-repeat:no-repeat;
    background-position:0 -50px;
    border:none;
}
#nav .current a b {
        background-image:url('images/right_nav.png');
        background-repeat:no-repeat;
    background-position:100% -50px;
    color:#ffffff; /* Цвет шрифта активного меню верхнего уровня */
}


#nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover, #nav .sub_active .current_sub a, #nav .sub_active a:hover {
    color:#f6ff00; /* Цвет шрифта активного меню нижнего уровня */
    text-decoration:underline;
        font:normal 14px Tahoma;
}


#nav .select li a:hover .sub, #nav .select li:hover .sub, #nav .sub_active {
    display:block;
    position:absolute;
    width:100%;
    height: 40px;
    top:40px;
    left:0;
    background:#7a8897; /* Фон нижнего уровня */
    padding:0 10px;
    z-index:100;
}

#nav .sub_active {
    z-index:10;
}

#nav .sub, #nav .sub_active {
    margin:0;
    padding:0 10px;
    list-style:none;
}


* html #nav .sub_active, * html #nav .select a:hover .sub {
    z-index:-1;
    margin-top:0;
    margin-top:1px;
}

#nav .sub_active a {
    height:25px;
    float:left;
    text-decoration:underline;
    line-height:24px;
    white-space:nowrap;
    font-weight:normal;
        font:normal 14px Tahoma;
}

#nav .sub_active a, #nav .select a:hover .sub li a, #nav .select li:hover .sub li a {
    display:inline;
    background:none;
    padding:0 10px;
    margin:0;
    font:normal 14px Tahoma; /* Размер шрифта нижнего уровня */
    width:auto;
    white-space:nowrap;
    font-weight:normal;
    border:0;
    color:#e1e8ef; /* Цвет шрифта нижнего уровня */
    height:35px;
    line-height:35px;
        text-decoration:underline;
}

Edited January 31, 2012 by maceraty

maceraty · February 1, 2012

Ну помогите же! На htmlbook так же почти сделано, только по клику. Ну как оно показывает разные подменю? Там же у всех элементов одинаковые классы, объясните пожалуйста, это же наверняка просто.

Catherine · February 1, 2012

Ну помогите же! На htmlbook так же почти сделано, только по клику. Ну как оно показывает разные подменю? Там же у всех элементов одинаковые классы, объясните пожалуйста, это же наверняка просто.

Почитайте про псевдокласс :hover. Обратите внимание на Пример №2. Очень подробно расписано назначение каждой строки CSS.

Edited February 1, 2012 by Catherine

Softlink · February 2, 2012

А что сложного тут? У появляющегося меню стоит изначально display:none; При ховере на пункте-родителе делаем выпадалке display:block;. Сама выпадалка позиционируется абсолютно, дабы никак не влиять на поток. У вас же код перед глазами весь.

Sign In

Принцип работы меню

Question

maceraty

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

maceraty

Link to comment

Share on other sites

Catherine

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information