原生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
0
投稿
猜你喜欢
- 先来看这行代码:<script src = "allMyClientSideCode.js"></sc
- 需求背景假设我们想设计一个定时任务,比如每天定时的用python来测试服务是否在正常运行,但是又不希望每天登录到系统后台去查看服务状态。这里
- python程序结构python“一切皆对象”,这是接触python听到最多的总结了。在python中最基层的单位应该就是对象了,对象需要靠
- Mysql环境变量配置mysql的环境变量配置步骤1.1、在桌面选择“计算机”的图标,右键&
- 页面置换算法:本质是为了让有限内存能满足无线进程。先说明一下处理缺页错误的过程:分页硬件在通过页表转换地址时会注意到无效位被设置,从而陷入操
- 一、Xpath概述1、Xpath简介Xpath(XML Path Language) 是一门在 XML 文档中查找信息的语言,可以
- documentFragment 是一個無父對象的document對象.他支持以下DOM2方法:appendChild, cloneNode
- 前言官方手册:https://dev.mysql.com/doc/refman/5.7/en/server-logs.html不管是哪个数据
- python语言本身没有提供const,但实际开发中经常会遇到需要使用const的情形,由于语言本身没有这种支出,因此需要使用一些技巧来实现
- 原问题是这样的:如何用SQL语句(不是Oracle),求出下表每一行的5个字段中的最大值,最后生成一个新字段。例如:第一行最大值 -5.0
- CSS文件的链接方式·附加链接:外部CSS文件·导入CSS:常用应用多个CSS文件时,将多个CSS导入一个CSS文件中CSS规则定义有三种:
- 1.数据采集和标记先采集数据,再对数据进行标记。其中采集数据要就有代表性,以确保最终训练出来模型的准确性。2.特征选择选择特征的直观方法:直
- 主要利用了XMLHTTP的一些方法和属性来获取服务器的信息。 以下是全部源代码: &
- 本文实例为大家分享了tkinter实现页面跳转的具体代码,供大家参考,具体内容如下主函数main.pyfrom tkinter import
- 我们调用高德地图的API来计算经纬度#计算地址经纬度import requestsdef geocode(address): paramet
- subplot函数介绍matplotlib下, 一个 Figure 对象可以包含多个子图(Axes), 可以使用 subplot() 快速绘
- 1.mysql复制概念 指将主数据库的DDL和DML操作通过二进制日志传到复制服务器上,然后在复制服务器上将这些日志文件重新执行
- 这个是升级的版本,比较进阶一点的,相对与之前的文件管理系统,数据只是存储到了内存中,而不是存储到硬盘上,我们想让文件存储到硬盘上的话,一个是
- 注意这里提取到的人脸图片的保存地址要改成自己要保存的地址opencv人脸的检测模型的路径也要更改为自己安装的opencv的人脸检测模型的路径
- 简介imgaug:机器学习实验中的图像增强库,特别是卷积神经网络。支持以多种不同方式增强图像、关键点/地标、边界框、热图和分割图。安装在an