使用js实现简单的下拉菜单

全部代码如下，详细注释已在代码注释中。

<!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>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}/* 后代选择器 */.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}</style>
</head><body><ul class="nav"><li><a href="#">我的淘宝</a><ul><li><a href="">我的足迹</a></li><li><a href="">我的上新</a></li><li><a href="">我的达人</a></li></ul></li><li><a href="#">购物车</a><ul><li><a href="">我的购物车</a></li><li><a href="">我的购物车</a></li><li><a href="">我的购物车</a></li></ul></li><li><a href="#">收藏夹</a><ul><li><a href="">我的收藏</a></li><li><a href="">我的收藏</a></li><li><a href="">我的收藏</a></li></ul></li><li><a href="#">商品分类</a><ul><li><a href="">家居</a></li><li><a href="">美妆</a></li><li><a href="">生活用品</a></li></ul></li></ul><script>// 1. 获取元素var nav = document.querySelector('.nav');var lis = nav.children; // 得到4个小li// 2.给每个小li 注册循环事件for (var i = 0; i < lis.length; i++) {// 绑定鼠标移过事件lis[i].onmouseover = function() {// 将小li的第二个孩子ul显示this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script>
</body></html>

结果如下图所示：

使用js实现简单的下拉菜单相关推荐

js实现简单的下拉菜单列表
下拉菜单效果图: 基本代码如下: <!DOCTYPE html> <html><head><meta charset=</
jquery实现简单的下拉菜单
本文用简单的几行jquery代码实现简单的下拉菜单效果看效果 html <ul><li>主题市场<ul><li>运动派<ul><li ...
js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求使用JavaScript+css+html ...
html5地区下拉菜单,JS特效：地区下拉菜单
可变的下拉菜单是网页中非常常见的一项功能,现在给大家做一个非常简单的实现,原理很简单,本质就是元素的显示与隐藏.代码如下大家试试. HTML 西安市铜川市宝鸡市未央区莲湖区新城区碑林区雁 ...
java用下拉框实现出生日期_纯JS实现出生日期[年月日]下拉菜单效果
在制作网页时,可能需要给用户提供注册帐号页面,用户注册设计很多信息,其中就有关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用J ...
vue.js bootstrap 下拉列表_Excel下拉菜单制作的小技巧
在工作中,常常需要对多行多列的数据设置下拉菜单,但在使用数据验证,设置下拉菜单时,序列来源是不能执行引用多行多列区域的,否则即会出现下图提示框,应该如何进行设置呢? 第一步:定义名称框鼠标依次点击公 ...
html5实现下拉刷新页面,原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
原生JS实现点击下拉菜单
接上一篇博文,这里实现点击下拉菜单. 与悬停不同的是,悬停的操作都是hover,直接写入CSS即可,这里需要将静态和动态样式分离,再JS添加点击事件,使用排他法绑定给目标元素特定的样式. 具体实现见下 ...
php表单设置出生日期,纯JS实现出生日期[年月日]下拉菜单效果_茜茜_前端开发者...
在制作网页时,可能需要给用户提供注册帐号页面,用户注册设计很多信息,其中就有关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用 ...

使用js实现简单的下拉菜单

使用js实现简单的下拉菜单相关推荐

最新文章

热门文章