随着网站内容的不断增加，我们需要对其进行分类整理，而随之而来的就是网站栏目的增加。
那怎么能把所有的栏目显示出来呢？
下面我为大家提供一段栏目导航代码。
//suckertree vertical menu (aug 4th, 06)
//by dynamic drive:
var menuids=["suckertree1"] //enter id(s) of suckertree ul menus, separated by commas
function buildsubmenus(){
for (var i=0; i var ultags=document.getelementbyid(menuids[i]).getelementsbytagname("ul")
for (var t=0; t ultags[t].parentnode.getelementsbytagname("a")[0].classname="subfolderstyle"
ultags[t].parentnode.onmouseover=function(){
this.getelementsbytagname("ul")[0].style.display="block"
}
ultags[t].parentnode.onmouseout=function(){
this.getelementsbytagname("ul")[0].style.display="none"
}
}
}
}
for (var i=0; i
for (var t=0; t
ultags[t].parentnode.onmouseover=function(){
this.getelementsbytagname("ul")[0].style.display="block"
}
ultags[t].parentnode.onmouseout=function(){
this.getelementsbytagname("ul")[0].style.display="none"
}
}
}
}
if (window.addeventlistener)
window.addeventlistener("load", buildsubmenus, false)
else if (window.attachevent)
window.attachevent("onload", buildsubmenus)
.suckerdiv ul { margin: 0; padding: 0; list-style-type: none; width: 150px; /* width of menu items */ border-bottom: 1px solid #ccc; }
.suckerdiv ul li { position: relative; }
/*1st level sub menu style */
.suckerdiv ul li ul { left: 149px; /* parent menu width - 1*/ position: absolute; width: 160px; /*sub menu width*/ top: 0; display: none; }
/*all subsequent sub menu levels offset */
.suckerdiv ul li ul li ul { left: 159px; /* parent menu width - 1*/ }
/* menu links style */
.suckerdiv ul li a { display: block; color: black; text-decoration: none; font:12px 宋体; background: #fff; padding: 5px 5px; border: 1px solid #ccc; border-bottom: 0; }
.suckerdiv ul li a:visited { color: black; }
.suckerdiv ul li a:hover { color: white; background-color: gray; }
.suckerdiv .subfolderstyle { background: no-repeat center right; }
/* holly hack for ie \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* end */
window.addeventlistener("load", buildsubmenus, false)
else if (window.attachevent)
window.attachevent("onload", buildsubmenus)
.suckerdiv ul { margin: 0; padding: 0; list-style-type: none; width: 150px; /* width of menu items */ border-bottom: 1px solid #ccc; }
.suckerdiv ul li { position: relative; }
/*1st level sub menu style */
.suckerdiv ul li ul { left: 149px; /* parent menu width - 1*/ position: absolute; width: 160px; /*sub menu width*/ top: 0; display: none; }
/*all subsequent sub menu levels offset */
.suckerdiv ul li ul li ul { left: 159px; /* parent menu width - 1*/ }
/* menu links style */
.suckerdiv ul li a { display: block; color: black; text-decoration: none; font:12px 宋体; background: #fff; padding: 5px 5px; border: 1px solid #ccc; border-bottom: 0; }
.suckerdiv ul li a:visited { color: black; }
.suckerdiv ul li a:hover { color: white; background-color: gray; }
.suckerdiv .subfolderstyle { background: no-repeat center right; }
/* holly hack for ie \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* end */
