javascript实现的三级下拉导航菜单
分类：实例代码
本章节介绍一下分享一段使用原生javascript实现的三级下拉导航菜单效果。
在实际应用中更为常见的是二级导航菜单，但是三级导航的菜单的出现频率也并不少，当然实现更为复杂一些。
下面就是代码实例，需要的朋友可以进行一下参考。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
li{list-style: none;}
.clearfix:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display: inline-block;}
a:link{
color:#000;
text-decoration:none;
}
a:visited{
color:#000;
text-decoration:none;
}
a:hover{
color:#000;
text-decoration:none;
}
.menu{
width:778px;
height:26px;
background:#fff;
margin:0 auto;
}
.menusel{
float:left;
width:100px;
position:relative;
height:25px;
background:#ddd;
line-height:25px;
margin-left:1px;
*margin-left:0px;
_margin-left:-1px;
}
.menusel h2{font-size:12px;}
.menusel a{
display:block;
text-align:center;
width:100px;
border:1px solid #a4a4a4;
height:25px;
border-bottom:1px solid #a4a4a4;
position:relative;
z-index:2;
}
.menusel a:hover{
border:1px solid #a4a4a4;
border-bottom:1px dashed #eeeeee;
position:relative;
z-index:2;
height:25px;
}
.ahover a{
border-bottom:1px dashed #eeeeee;
background:#eeeeee;
}
.position{
position:absolute;
z-index:1;
}
.menusel ul{
width:125px;
background:#eee;
border:1px solid #a4a4a4;
margin-top:-1px;
position:relative;
z-index:1;
display:none;
}
.menusel .block{
display:block;
}
.typeul li{
border-bottom:1px dashed #a4a4a4;
width:125px;
position:relative;
float:left;
}
.typeul li a{
border:none;
width:125px;
}
.typeul li a:hover{
border:none;
background:#ddd;
}
.typeul{
margin-left:0;
}
.typeul ul{
left:125px;
top:0;
position:absolute;
}
.fli{
margin-left:-1px;
border-left:#eeeeee solid 1px;
}
.menusel .lli{
border:none;
}
</style>
</head>
<body>
<div class="menu">
<div id="menu1" class="menusel">
<h2><a href="/">菜单1</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="http://www.jb51.net">菜单选项1-2</a></li>
<li> <a href="#">菜单选项1-2</a>
<ul>
<li class="fli"><a href="#">菜单选项1-2-1</a></li>
<li class="lli"><a href="#">菜单选项1-2-2</a></li>
</ul>
</li>
<li><a href="http://www.jb51.net">菜单选项1-2</a></li>
<li class="lli"><a href="#">菜单选项1-2</a></li>
</ul>
</div>
<!-- position -->
</div>
<!-- menusel -->
<div id="menu2" class="menusel">
<h2><a href="#">菜单2</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="#">菜单选项2-2</a></li>
<li><a href="#">菜单选项2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项2-2-1</a></li>
<li class="lli"><a href="#">菜单选项2-2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项2-2-1</a></li>
<li class="lli"><a href="#">菜单选项2-2-2</a> </li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单选项2-2</a></li>
<li class="lli"><a href="#">菜单选项2-2</a></li>
</ul>
</div>
<!-- position -->
</div>
<!-- menusel -->
<div id="menu3" class="menusel">
<h2><a href="#">菜单3</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="#">菜单选项3-2</a></li>
<li><a href="#">菜单选项3-2</a>
<ul>
<li class="fli"><a href="#">菜单选项3-2-1</a></li>
<li class="lli"><a href="#">菜单选项3-2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项3-2-1</a></li>
<li class="lli"><a href="#">菜单选项3-2-2</a>
<ul>
<li class="fli"><a href="#">菜单选项3-2-1</a></li>
<li class="lli"><a href="#">菜单选项3-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单选项3-2</a></li>
<li class="lli"><a href="#">菜单选项3-2</a></li>
</ul>
</div>
<!-- position -->
</div>
<!-- menusel -->
</div>
<!-- menu -->
<script type="text/javascript">
for(var x = 1; x < 4; x++) {
var menuid = document.getElementById("menu"+x);
menuid.num = x;
type();
}
function type(){
var menuh2 = menuid.getElementsByTagName("h2");
var menuul = menuid.getElementsByTagName("ul");
var menuli = menuul[0].getElementsByTagName("li");
menuh2[0].onmouseover = show;
menuh2[0].onmouseout = unshow;
menuul[0].onmouseover = show;
menuul[0].onmouseout = unshow;
function show(){
menuul[0].className = "clearfix typeul block"
}
function unshow(){
menuul[0].className = "typeul"
}
for(var i = 0; i < menuli.length; i++){
menuli[i].num = i;
var liul = menuli[i].getElementsByTagName("ul")[0];
if(liul){
typeshow()
}
}
function typeshow(){
menuli[i].onmouseover = showul;
menuli[i].onmouseout = unshowul;
}
function showul(){
menuli[this.num].getElementsByTagName("ul")[0].className = "block";
}
function unshowul(){
menuli[this.num].getElementsByTagName("ul")[0].className = "";
}
}
</script>
</body>
</html>
网站出售中，有意者加微信：javadudu