原生js多级菜单启示录

最新推荐文章于 2022-10-10 02:37:40 发布

码农的N次方

最新推荐文章于 2022-10-10 02:37:40 发布

阅读量355

点赞数

分类专栏： web前端，ES5 文章标签： javascript html dom

本文链接：https://blog.csdn.net/qq_38384536/article/details/73136024

版权

web前端，ES5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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.οnlοad=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].οnmοuseοver=function(){
var subMenu=this.getElementsByTagName('ul')[0];
//判断是否有二级菜单
if(subMenu){
subMenu.style.display="block";
}
};
//-------------------------------------------------------
aLi[i].οnmοuseοut=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>

码农的N次方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js多级菜单启示录

二级菜单完整版*{ 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:absolut
复制链接

扫一扫

专栏目录