13顶

通过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生成一个正方型并旋转画出一个花纹圆型图案的实例特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻