简单原生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>

效果图如下：

简单原生js代码实现下拉菜单相关推荐

原生js写网页下拉菜单
要实现的目标,点击一行中的一个分类时,展开对应的子列表,该功能多用于网页的导航,电商的分类购物集合. 第一步:写html结构 <div id="con"> ...
JavaScript（js）网页–下拉菜单制作
JavaScript(js)网页–下拉菜单制作在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标 ...
JavaScript（js）网页--下拉菜单制作
JavaScript(js)网页–下拉菜单制作在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标 ...
Excel如何快速简单的设置3级下拉菜单？
今天小编要和大家分享的是,Excel如何快速简单的设置3级下拉菜单?看下图大家要先了解,城市与学校的1-2级从属关系,然后是学校与系名的2-3级从属关系-- (方方格子插件) 1.先看动图演示吧 ...
左侧栏下拉框HTML代码,html5下拉菜单代码
html5如何实现文本框下拉选项功能使用html5或者jQuery如何实现文本框下拉效果,如下图 CSS布局HTML小编今天和大家分享大神详解最好有可以使用HTML5 list 属性.list 属性 ...
Uncaught TypeError: Bootstrap dropdown require Popper.js (https://popper.js.org)（下拉菜单）
报错内容: 在做网页设计的时候,使用Bootstrap框架的下拉菜单,在谷歌浏览器中打开html进行测试的时候发现点击下拉菜单无反应的问题,打开F12,报错内容如下所示: 前端代码展示 <!DO ...
JS 新浪下拉菜单+jQuery
思考:首先在CSS布局上就出错了,导致后面设置JS时就有很大的问题 <!DOCTYPE html> <html lang="en"><head> ...
【JS】模拟下拉菜单
鼠标点击时,下拉菜单出现鼠标划过或按键盘上下箭头时,选中的菜单背景色变化,选项内容显示在输入框内鼠标点击或按下回车或空格键时,对应的内容显示在输入框内且下拉菜单消失效果图 HTML <di ...
js动态改变下拉菜单内容示例 .
<HTML><HEAD><TITLE>动态改变下拉菜单内容示例</TITLE></HEAD><SCRIPT LANGUAGE=java ...
JS 按钮下一步下拉菜单内容转换
下一步按钮用到的知识点点击事件 onclick 移除属性 removeAttribute 创建属性 setAttribute 源代码 1 <!DOCTYPE html> 2 &l ...

简单原生js代码实现下拉菜单

简单原生js代码实现下拉菜单相关推荐

最新文章

热门文章