2014-09-04
391
Это вертикальное выпадающее меню, которое позволяет разместить большое количество ссылок на ограниченной площади.
Простая, удобная и красивая навигация на сайте с большим количеством разделов.
Применяются псевдоклассы CSS. Используя псевдокласс hover, мы меняем свойство выпадающего блока с display:none на display:block. Т. е., при наведении мышки невидимый контейнер со ссылками становится видимым.
2.2.1. Создадим тело нашего меню:
<div id="menu_body">
<ul id="ul1">
<li><a href="#">menu 1</a>
<ul>
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
</ul>
</li>
</ul>
</div>
Где <div id="menu_body"> используется для задания фона, <ul id="ul1"> — список с пунктами меню, а <li><a href="#">sub menu 1</a></li> — пункты подменю.
2.2.2. При помощи стилей уберем подменю:
#menu_body li ul{display:none}3. Используя псевдокласс hover, сделаем подменю видимым при наведении мыши:
#menu_body li:hover ul, #menu_body li.over ul{
|
|
|
display: block
}
2.2.3 Поскольку Internet Explorer считает, что псевдоклассом hover обладает только тег a, добавим небольшой код на JavaScript, который это исправит:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("ul1");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over","");
}
}
}
}
}
window.onload=startList;
2.2.4 Вот собственно и все, осталось навести красоту:
#menu_body{
background:#81A192;
width:200px
}
#menu_body ul li{
list-style-type:none;
border-bottom:1px solid #fff;
margin-left:-40px;
padding-left:7px
}
#menu_body ul li a{
color:#fff;
font-family:verdana,arial,sans-serif;
text-decoration:none
}
#menu_body ul li ul li{
border:0;
list-style-type:square;
color:#fff;
list-style-position:inside
}
#menu_body ul li ul{
border-top:1px solid #fff;
margin-left:-7px;
padding-left:50px
}
Кроссбраузерность
IE 5+; Opera 7+; FF 1+; Mozilla 1+.
У меню есть два очень серьезных недостатка: если список разделов или подразделов очень велик, то при открытии подменю появляется полоса прокрутки, а когда вы хотите прокрутить страницу, меню закрывается; если у пользователя старого браузера не работает это меню, то он вообще не сможет перемещаться по вашему сайту.
