<head>
<script>
startList=function(){
if(document.all&&document.getElementById){
navRoot = document.getElementById("nav");
for(var i=0;i<navRoot.childNodes.length;i++){
node = navRoot.childNodes[i].childNodes[0];
if(node.nodeName=="LI") {
node.onmouseover=function(){this.className+=" over"}
node.onmouseout=function(){this.className=this.className.replace(" over", "")}
}
}
}
}
window.onload=startList;
</script>
<style>
ul{
margin: 0;padding: 0;list-style: none;
width: 170px; /* Width of Menu Items */
border-bottom: 1px solid #030165;
}
ul li{position: relative;text-align : left;}
li ul{
position: absolute;
left: 0px;
top: 28px;
/* Set 1px less than menu width */
display: none;text-align : left;
}
ul li a{
display: block;text-decoration: none;
color: #333333;
background: #CCCCCC; /* IE6 Bug */
padding: 4px;
border: 1px solid #000000;border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover {
color: #FFFFFF;
background: #CCCCCC;
POSITION: relative;
TOP: 0px;
LEFT: 0px;
} /* Hover Styles */
li ul li a menu { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--
Модернизировать сложно, т.к. теги ul\li на 90 градусов не развернешь. Можно переписать под таблицу или слои. Но именно переписать, а не модернизировать, т.к. добавляемые потомки объекта отображаются только горизонтально или вертикально и соответственно написать сразу универсальное дерево для N>2 слоев проблемматично с исспользованием этого скрипта.
Не вдаваясь в подробности, могу сказать, что я бы сделал приблизительно так:
<div id=nav1 style="position:absolute,visibility:hidden">
<nav>
<layer1 name="link1.0" href="url"><layer2 name="link1.0" href="url"></layer2><layer2 name="link1.1" href="url"></layer2></layer1>
<layer1 name="link2.0" href="url"><layer2 name="link2.1" href="url"></layer2></layer1>
<layer1 name="link3.0" href="url"><layer2 name="link3.1" href="url"></layer2></layer1>
</nav>
</div>
<script>
Псевдокод:
XML=nav1.innerHTML
Парсим XML layer1 в таблицу "<tr><td onMouseOver=show(this) onMouseOut=hide(this) id="link1.0">link1.0</td><td>link2.0</td><td>link3.0</td></tr>"
function show(o){
парсим XML[@name=o.id].layer2 в <tr>...</tr>
$(tableId).insertRow|appendChild|innerHTML its.
}
</script>
-->
<ul>
<table><tr id="nav"><td>
<li><a href="#" >Ссылка1</a>
<ul>
<li><a href="#" >Ссылка11</a></li>
<li><a href="#" >Ссылка12</a></li>
<li><a href="#" >Ссылка12</a></li>
</ul>
</li>
</td><td>
<li><a href="#" >Ссылка2</a>
<ul>
<li><a href="#" >Ссылка21</a></li>
<li><a href="#" >Ссылка22</a></li>
<li><a href="#" >Ссылка23</a></li>
</ul>
</li>
</td></tr></table>
</ul>
</body>
</html>
Чат на форуме
Помощь
Поиск
Описание: Очень надо
Я даж исправлять не стану.
