В данном вертикальном меню, подменю открывается не при наведении курсора на главный пункт меню, как в предыдущем примере, а при клике на него.
1. CSS
#menu_body li ul {
display: none;
}
#menu_body li:hover ul, #menu_body li.over ul {
display: block;
}
#menu_body {
background:#171717;
width: 200px;
}
#menu_body a {
display: block;
width: 185px;
height: 24px;
padding-left: 15px;
}
#menu_body ul li {
list-style-type: none;
border-bottom: 1px solid #fff;
margin-left: -40px;
padding-left: 0px;
}
#menu_body ul li a {
color: #fff;
text-decoration: none;
font-size: 115%;
font-family: Georgia;
}
#menu_body ul li a:hover {
color: #fff;
text-decoration: none;
background:#424242;
}
#menu_body ul li ul li {
border: 0;
list-style-type: none;
color: #fff;
list-style-position: inside;
background:#7F7F7F;
}
#menu_body ul li ul{
border-top: 1px solid #fff;
margin-left: -10px;
padding-left: 50px;
}
2. JavaScript
Данный код вставляем перед закрывающим тегом
<script type="text/javascript">
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
startList = function allclose() {
for (i=0; i < id_menu.length; i++){
document.getElementById(id_menu[i]).style.display = "none";
}
}
function openMenu(id){
for (i=0; i < id_menu.length; i++){
if (id != id_menu[i]){
document.getElementById(id_menu[i]).style.display = "none";
}
}
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}
window.onload=startList;
</script>
2.1. Разбор JavaScript
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
В данной строке нужно указать столько
'sub_menu_1','sub_menu_2','sub_menu_3','sub_menu_4','sub_menu_5','sub_menu_6','sub_menu_7','sub_menu_8','sub_menu_9'
3. HTML
<div id="menu_body">
<ul>
<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">Пункт №1</a>
<ul id="sub_menu_1">
<li><a href="#">Подпункт №1</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_2');return(false)">Пункт №2</a>
<ul id="sub_menu_2">
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_3');return(false)">Пункт №3</a>
<ul id="sub_menu_3">
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
<li><a href="#">Подпункт №3</a></li>
</ul>
</li>
</ul>
</div>
Internet Explorer 6 не совсем корректно отображает данное меню, но это всего лишь проблема стилей, которые мне просто лень подгонять под IE6.