通过JS+CSS实现的三级网站竖向导航浮动联动菜单特效代码

稿源：互联网 2018-09-02 22:42:46 点击： 10153 撤稿纠错

又一款精典的三级菜单导航特效示例，代码简洁，便于调用。

以下讨论的是和三级竖向导航浮动菜单相关的通过JS+CSS实现的三级网站竖向导航浮动联动菜单特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>三级网站竖向导航浮动菜单特效代码</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>
<style type="text/css">
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
}
.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(http://www.alixixi.com/images/icon_list_off2.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 */




</style>
</head>
<body>

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="http://js.alixixi.com">网页特效</a></li>
<li><a href="http://moban.alixixi.com">网站模板</a></li>
<li><a href="http://down.alixixi.com">源码下载</a>
  <ul>
  <li><a href="#">PHP源码</a></li>
  <li><a href="#">ASP源码</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>

关于通过JS+CSS实现的三级网站竖向导航浮动联动菜单特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090294190.shtml方便下次再访问哦。

·上一篇： 一款竖向四级联动的导航菜单特效 4级网站菜单特效代码
·下一篇： 通过canvas生成一个正方型并旋转画出一个花纹圆型图案的实例特效

通过JS+CSS实现的三级网站竖向导航浮动联动菜单特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻