| |
|
|
| | Здравствуйте Уважаемое сообщество. Как мне изменить участок кода чтобы пункты подменю появлялись не при наведении указателя на пункт меню а при нажатии на пункт меню.
Участок кода такой.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<script language="javascript"> // Псевдокласом hover обладает не только тег a ul1
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;
</script>
<style type="text/css">
#menu_body li ul {display:none} /* Убираем подменю */
#menu_body li:hover ul, #menu_body li.over ul
{ display: block } /* Делаем подменю видимым при наведении мыши */
#menu_body{
background:#81A192;
width:200px
}
/*#menu_body li
{ display: block;} */
#menu_body a
{ display: block; width:100%; }
#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
}
</style>
</head>
<body>
<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>
<li><a href="#">menu 2</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>
<li><a href="#">menu 3</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>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: pautina
(10.06.2008 в 16:10)
| | | Ну если по минимуму:
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.onclick=function() {
if (this.className==" over") this.className=this.className.replace(" over","");
else this.className+=" over";
}
}
}
}
}
|
Но а как вы будете тогда ссылки выполнять, особенно верхних уровней? | |
| |
|
|
| |
|
|
| |
для: sim5
(10.06.2008 в 16:33)
| | | Да о переходе я ни подумал, лучше оставлю так как было? Спасибо за информацию. | |
| |
|
|
