2014-09-04
341
Это вертикальное раскрывающееся меню, которое позволяет разместить большое количество ссылок на ограниченной площади. Фактически это доработка предыдущего меню, которая позволяет убрать все его недостатки.
Простая, удобная и красивая навигация на сайте с большим количеством разделов, которая будет работать во всех браузерах.
Используя, как и в предыдущем примере, вложенные списки и свойства CSS display, добавляем короткий код на JavaScript для управления видимостью раскрывающихся блоков.
2.3.1. Создадим тело нашего меню:
<ul id="menu">
<li><a href="#" onclick="openMenu(this);return false">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>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
</ul>
Где <div id="menu"> используется для задания фона, <li><a href="#" onclick = "openMenu(this);return false">menu 1</a> — пункты меню c вызовом функции открытия или закрытия подменю по событию onclick.
2.3.2. Напишем функцию на JavaScript, которая будет открывать и закрывать подменю.
function openMenu(node){
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none"? subMenu.style.display = "block": subMenu.style.display = "none";
}
2.3.3. Позаботимся о пользователях старых браузеров, и вместо того, чтобы писать в стилях #menu li ul{display:none}, напишем еще одну функцию, которая будет закрывать все подменю при загрузке страницы. Если по каким-либо причинам наш JavaScript код не сработает, меню будет полностью открыто и позволит пользователю кликать на ссылки подменю.
function allClose(){
var list = document.getElementById("menu").getElementsByTagName("ul");
for(var i=0;i<list.length;i++){
list[i].style.display = "none";
}
}
2.3.4. Поставим вызов этой функции на загрузку страницы.
<body onload="allClose()">5. Вот собственно и все, осталось навести красоту:
#menu{background:#81A192;width:200px;list-style-type:none;padding:0;margin:0}
#menu li{border-bottom:1px solid #fff;padding:3px}
#menu li a{color:#fff;font-family:verdana,arial,sans-serif;text-decoration:none}
#menu li ul{border-top:1px solid #fff;padding:0;margin:0;list-style-type:square;list-style-position:inside}
#menu li ul li{border:0;list-style-type:square;color:#fff;list-style-position:inside}
