Дървовидно меню
Публикувана от smilev на January 12 2011 09:13:25
Разширена новина
Броят падащи менюта е неограничен. Няма да е проблем дори едно под-под-под-подменю. Необходимо е само да се добавя html код - нищо повече.
Ето го и скрипта:
[code]<html>
<head>
<title></title>
<style type="text/css">
#menu {margin: 0px; padding: 0px;}
#menu li {margin: 0px; padding: 0px;}
#menu ul {display: none; margin: 0px 15px; padding: 0px 15px;}
</style>
<script type="text/javascript">
function operateMenu() {
var menu=document.getElementById('menu');
var Links=menu.getElementsByTagName('A');
for(var i=0; i<Links.length; i++) {
Links[i].onclick=function() {
var Lists=this.parentNode.parentNode.getElementsByTagName('UL');
for(var j=0; j<Lists.length; j++)
Lists[j].style.display='none';
if(this.nextSibling.nextSibling && this.nextSibling.nextSibling.tagName=='UL')
this.nextSibling.nextSibling.style.display='block';
}
}
}
</script>
</head>
<body>
<ul id="menu">
<li><a href="#">Item 1</a></li>
<li>
<a href="#">Item 2</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li>
<a href="#">Subitem 2</a>
<ul>
<li><a href="#">Sub-subitem 1</a></li>
<li><a href="#">Sub-subitem 2</a></li>
<li><a href="#">Sub-subitem 3</a></li>
<li><a href="#">Sub-subitem 4</a></li>
<li><a href="#">Sub-subitem 5</a></li>
<li><a href="#">Sub-subitem 6</a></li>
</ul>
</li>
<li><a href="#">Subitem 3</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript"> operateMenu(); </script>
</body>
</html>[/code]