JavaScripts на ibutov

Каскадное меню

Пример и код ниже:

Каскадное Меню

<style type="text/css"> .subhead { cursor: hand ;color: navy ; font-size:16; } a {cursor: hand ; color: navy ; text-decoration:none } a:active {cursor: hand ; color: red ; } a:hover {cursor: hand ; color: red ; text-decoration:underline } span.indent2 {position:relative; left: 25px } .list {position:relative; left: 35px} </style> <script language="JavaScript"> //http://ibutov.narod.ru function openIt() { currEl = event.srcElement; if (currEl.className == "subhead") { newId = currEl.id + "vis" imgId = currEl.id showIt = document.all(newId) ; if (showIt.style.display == "none") { showIt.style.display = "" ; document.images(imgId).src = "minus.gif" } else { showIt.style.display = "none" ; document.images(imgId).src = "plus.gif" }}} </script> <body bgcolor="#ffffff" onclick="openIt()" topmargin="10"> <a name="1"></a> <img src="plus.gif" id="group0" class=subhead width="11" height="9"> <a href="#1" id="group0" class=subhead> Каскадное Меню</a><br> <div id="group0vis" style="display:None"> <span class=indent2><img src="plus.gif" class=subhead id="group1" width="11" height="9"> <a href="#1" class=subhead id="group1" >Секция 1 </a></span><br> <div id="group1vis" class=list style="display:None" > <img src="green.gif" width="10" height="10"> <a href='http://ibutov.narod.ru/java/java.htm' >Назад на страницу скриптов</a><br> <img src="green.gif" width="10" height="10"> <a href='http://ibutov.narod.ru' >На главную страницу</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> </div> <span class=indent2><img src="plus.gif" class=subhead id="group2" width="11" height="9"> <a href="#1" class=subhead id="group2" >Секция 2 </a></span><br> <div id="group2vis" class=list style="display:None"> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <span class=indent2><img src="plus.gif" class=subhead id="group1a" width="11" height="9"> <a href="#1" class=subhead id="group1a" >Суб Секция 2</a> </span><br> <div id="group1avis" class=list style="display:None" > <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> </div> </div> <span class=indent2><img src="plus.gif" class=subhead id="group3" width="11" height="9"> <a href="#1" class=subhead id="group3" >Секция 3</a></span><br> <div id="group3vis" class=list style="display:None"> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <span class=indent2><img src="plus.gif" class=subhead id="group3a" width="11" height="9"> <a href="#1" class=subhead id="group3a" >Суб Секция 3</a> </span><br> <div id="group3avis" class=list style="display:None" > <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> </div> </div> <span class=indent2><img src="plus.gif" class=subhead id="group4" width="11" height="9"> <a href="#1" class=subhead id="group4" >Секция 4</a></span><br> <div id="group4vis" class=list style="display:None"> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> <img src="green.gif" width="10" height="10"> <a href='java.htm' >Ваша ссылка</a><br> </div> </div>