原生js多级菜单启示录

来源：互联网发布：php代替session 编辑：程序博客网时间：2024/05/16 10:49

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级菜单完整版</title>
<style>
*{ margin:0; padding:0; font-size:14px;}
ul,li,ol{ list-style:none}
a{ text-decoration:none;}
.arrow{ border:5px solid transparent; font-size:0px; border-top-color:#fff; position:absolute; top:18px; right:10px; display:none}

.nav{ height:40px; background:#3A5998;}
.nav li{ float:left; position:relative;}
.nav li a{ display:block; height:40px; line-height:40px; padding:0 20px;color:#fff;}
.nav li:hover a{ background:red; color:#fff;}
.nav li .subMenu{ width:150px;position:absolute; top:40px; left:0px;display:none }
.nav li .subMenu li{ float:none}
.nav li .subMenu li a{height:30px; background:#6E93DD; line-height:30px; border:1px solid #ccc; font-size:12px;}
.nav li .subMenu li a:hover{background:#3A5998;}
.nav .hasSubMenu{ padding-right:0}
.nav .hasSubMenu a{ padding-right:40px; }
.nav .hasSubMenu .arrow{ display:block}
</style>

<script>
window.onload=function(){
var oNav=document.getElementById('mainNav');
var aLi=oNav.getElementsByTagName('li');

for(var i=0; i<aLi.length; i++){
var hasSub=aLi[i].getElementsByTagName('ul')[0];//判断是否有子菜单
if(hasSub){
aLi[i].className="hasSubMenu";
};
//-------------------------------------------------
aLi[i].onmouseover=function(){
var subMenu=this.getElementsByTagName('ul')[0];
//判断是否有二级菜单
if(subMenu){
subMenu.style.display="block";
}
};
//-------------------------------------------------------
aLi[i].onmouseout=function(){
var subMenu=this.getElementsByTagName('ul')[0];
if(subMenu){
subMenu.style.display='none';
}
};
}

}
</script>

</head>

<body>
<ul id="mainNav" class="nav">
<li><a href="#">首页</a><span class="arrow"></span></li>
<li id="product_list">
<a href="#">产品列表</a><span class="arrow"></span>
<ul id="product_list_subMenu" class="subMenu">
<li><a href="#">冰箱</a></li>
<li><a href="#">彩电</a></li>
<li><a href="#">洗衣机</a></li>
<li><a href="#">小家电</a></li>
</ul>
</li>
<li id="news_list">
<a href="#">新闻列表dfsdfsdf</a><span class="arrow"></span>
<ul id="news_list_subMenu" class="subMenu">
<li><a href="#">最新动态</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">内部活动</a></li>
<li><a href="#">客户活动</a></li>
</ul>
</li>
<li><a href="#">内部管理</a><span class="arrow"></span></li>
<li><a href="#">关于我们</a><span class="arrow"></span></li>
</ul>
</body>
</html>

阅读全文

0 0