原生js实现下拉菜单
作者:梦里~花开又半夏… 发布时间:2024-04-28 09:43:04
标签: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>
效果图如下:
来源:https://blog.csdn.net/qq_43710807/article/details/97929746


猜你喜欢
- 在python中,“np”一般是指“numpy”库,是第三方库“numpy”的别名。方法:利用命令“import numpy as np”将
- 1、背景我们先谈谈为什么在Python编码过程中强烈推荐使用类型注解 ?Python对于初学者来说是非常好上手,原因是在于对计算机底层原理的
- mysql-5.7.23-winx64 解压版详细安装教程,供大家参考,具体内容如下1、Click here to download Mys
- 由于系统自带的MySQL默认字符集不是gbk,因此给数据库的推广应用以及中文程序的开发带来极大的不便,在没完没了的GBK和UTF8的转换过程
- <html><head><title>过滤空格</title><SCRIPT LANG
- binascii模块用法binascii模块用于在二进制和ASCII之间转换>> import binascii# 将binar
- 1. vscode相关配置w3c school 手册: https://www.w3school.com.cn/html/inde
- 本文实例为大家分享了python实现学生信息管理系统的具体代码,含代码注释、增删改查、排序、统计显示学生信息,供大家参考,具体内容如下运行如
- ASP与存储过程(Stored Procedures)的文章不少,但是我怀疑作者们是否真正实践过。我在初学时查阅过大量相关资料,发现其中提供
- 解决案例一:今天公司服务器上所有的网站都出现问题,有的打开没有数据,有的直接是空白。我的第一反应就是数据库挂了。打开远程,进了系统,serv
- fixtures调用其他fixtures及fixture复用性 pytest最大的优点之一就是它非常灵活。它可以将复杂的测试需求简
- 本文实例讲述了Python线性拟合实现函数与用法。分享给大家供大家参考,具体如下:1. 参考别人写的:#-*- coding:utf-8 -
- MySQL8.0的安装及配置方法,供大家参考,具体内容如下下载:先上网站在这个网站中找到下载完成后解压缩到你需要的路径MySQL配置然后在解
- 步骤——1:定位在通过与客户,或与和客户接触的业务人员交流,做出一个准确的定位.定位的准确与否,虽然不能决定一定通过,但如果定位不准或相差太
- struct简介看到struct这么英文单词,大家应该并不陌生,因为c/c++中就有struct,在那里struct叫做结构体。在Pytho
- 前言全局共享内存则主要是 MySQL Instance(mysqld进程)以及底层存储引擎用来暂存各种全局运算及可共享的暂存信息,如存储查询
- 在进制学习时候,细心的小伙伴不免都发现unicher函数的存在,没错能够经常看到的,也就是关于进制的转化,那肯定有小伙伴要开心起来了,因为进
- 今天看看那些知名的Logo,可能你没注意过,它们也是一直在变化,有的还挺雷人的!先从时尚的苹果开始吧,苹果也有土的时候。1976年那第一个L
- 作用:主要记录信息,便于定位查看问题。python logging模块官网:https://docs.python.org/zh-cn/3.
- 正在看的ORACLE教程是:Access2000迁移到Oracle9i要点。 &nb