js 3级横向导航菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js 3级横向导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为3级横向导航菜单，属于站长常用代码" />
<title>3级横向导航菜单</title>
<script type="text/javascript">
//SuckerTree Vertical Menu (Aug 4th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; 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"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
</head>
<body>

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</a>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
</body>
</html>

CSS代码(css.css):

.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:url(../images/arrow-list.gif) no-repeat center right;}
/* Holly Hack for IE \*/
* html .suckerdiv ul li{float:left;height:1%;}
* html .suckerdiv ul li a{height:1%;}
/* End */

附件:下载该文件资源,减少时间成本(增值服务)