原生js实现下拉菜单
更新时间：2021年09月16日 09:30:59 作者：梦里～花开又半夏…
这篇文章主要为大家详细介绍了原生js实现下拉菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
下拉菜单在实际生活中也挺常见的，它实现的js代码与tab选卡，手风琴几乎一样，在此不过多赘述。
我仿照苏宁易购官网写了一个下拉菜单，实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉菜单</title>
<style>
body,
ul {
padding: 0;
margin: 0;
}
body{
background-color:#ccc;
}
li {
list-style: none;
}
a{
text-decoration: none;
}
a:hover{
color: rgb(235, 98, 35);
}
.nav {
float: right;
margin-top: 10px;
margin-right: 80px;
display: flex;
width: 270px;
height: 100px;
}
.nav>li {
width: 80px;
margin: 5px;
text-align: center;
}
.selected{
width: 80px;
background-color:#fff;
color: rgb(235, 98, 35);
border:1px solid rgb(196, 194, 194);
}
.nav>li div:nth-child(1){
height: 30px;
line-height: 30px;
}
.nav>li div:nth-child(2){
display: none;
height: 160px;
width: 80px;
background-color: #fff;
border:1px solid rgb(196, 194, 194);
border-top:1px solid #fff;
line-height: 70px;
}
.nav>li>div:nth-child(2) li{
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<div><a herf="#">我的订单</a></div>
<div>
<ul>
<li><a herf="#">待支付</a></li>
<li><a herf="#">待发货</a></li>
<li><a herf="#">待收货</a></li>
<li><a herf="#">待评价</a></li>
</ul>
</div>
</li>
<li>
<div><a herf="#">我的易购</a></div>
<div>
<ul>
<li><a herf="#">我的二手</a></li>
<li><a herf="#">我的关注</a></li>
<li><a herf="#">我的金融</a></li>
<li><a herf="#">苏宁会员</a></li>
</ul>
</div>
</li>
<li>
<div><a herf="#">我的主页</a></div>
<div>
<ul>
<li><a herf="#">头像</a></li>
<li><a herf="#">昵称</a></li>
<li><a herf="#">签名</a></li>
<li><a herf="#">地址</a></li>
</ul>
</div>
</li>
</ul>
<script>
var s=document.querySelectorAll(".nav li div:nth-child(1)");
var d=document.querySelectorAll(".nav li div:nth-child(2)");
for(var i=0;i<s.length;i++){
s[i].index=i;
s[i].onmouseover=function(){
for(var j=0;j<s.length;j++){
s[j].className="";
d[j].style.display="none";
}
this.className="selected";
d[this.index].style.display="block";
}
}
</script>
</body>
</html>
效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
encodeURI和encodeURIComponent以及escape，这三个都是用来编码的，本篇文章给大家介绍encodeURI和encodeURIComponent以及escape的区别与应用，感兴趣的朋友一起学习吧2015-11-11
这篇文章主要介绍了原生JS实现的双色球功能,涉及javascript随机数生成及数值运算相关操作技巧,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了js实现完全自定义可带多级目录的网页鼠标右键菜单方法,实例分析了javascript实现自定义网页鼠标右键弹出菜单的技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了js实现自定义下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了JavaScript中解析JSON数据的三种方法,本文讲解了eval()方法、new Function方法、JSON.parse()方法等三种方法,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了ES6所改良的javascript“缺陷”问题的相关资料,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了js实现网页右上角滑出会自动消失大幅广告的方法,是javascript广告特效的典型应用,非常具有实用价值,需要的朋友可以参考下2015-02-02
typescript使用 ?. ?? ??= 运算符的方法步骤
本文主要介绍了typescript使用 ?. ?? ??= 运算符的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
在页面中放入一个DropDownList控件，并添加一项，用来分析其产生的HTML代码，这样在使用js进行动态控制时，将会非常清晰2014-09-09
下面小编就为大家带来一篇javascript帧动画(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论