原生js实现下拉菜单
作者：梦里～花开又半夏… 时间：2024-04-28 09:43:04
下拉菜单在实际生活中也挺常见的，它实现的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>
效果图如下：
来源：https://blog.csdn.net/qq_43710807/article/details/97929746
标签：js,下拉菜单
0
投稿猜你喜欢
Linux下安装Mysql多实例作为数据备份服务器实现多主到一从多实例的备份
2024-01-13 19:12:27
Python获取航线信息并且制作成图的讲解
2023-08-28 18:18:56
详解Python Flask框架的安装及应用
2022-06-20 11:12:50
vue.js选中动态绑定的radio的指定项
2024-04-27 16:13:25
git 优雅的撤销中间某次提交方法
2023-12-27 11:12:50
Python学习之yaml文件的读取详解
2023-04-20 14:06:42
C# 制作PictureBox圆形头像框并从数据库中读取头像
2024-01-21 05:17:07
python-docx如何缩进两个字符
2022-07-04 15:56:45
Pygame游戏开发之太空射击实战盾牌篇
2023-09-20 22:47:59
关于网站地图
2011-01-06 12:14:00
Python Pandas教程之series 上的转换操作
2023-08-16 22:20:50
mysql 中文乱码 解决方法集锦
2024-01-28 06:05:29
python3 实现除法结果为整数
2023-06-27 20:08:22
python简单的函数定义和用法实例
2022-10-07 12:35:03
Web前端应用十种常用技术
2010-09-01 20:46:00
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2023-10-03 00:48:07
Python对字符串实现去重操作的方法示例
2021-12-12 11:46:37
详解Go-JWT-RESTful身份认证教程
2024-02-17 07:44:56
python图像处理模块Pillow的学习详解
2021-06-03 19:19:03
Fabric 应用案例
2021-10-11 13:13:01