js+css+html制作下拉菜单 |
您所在的位置:网站首页 › 鼠标经过显示二级菜单js › js+css+html制作下拉菜单 |
js+css+html制作下拉菜单
1 案例需求2 编写HTML结构代码3 编写css样式4 编写JavaScript部分5 全部代码
1 案例需求
使用JavaScript+css+html制作下拉菜单,当鼠标放在菜单项时,菜单项的背景色会改变,而且会出现二级菜单,当鼠标放在二级菜单上时,二级菜单会变色,当鼠标离开菜单项后,二级菜单隐藏。 效果图: 在HTML页面代码中,先用列表把菜单的内容做出来,代码如下: 文件 新建文件 新建窗口 新建文件夹 编辑 撤销 重做 剪切首先将所有的外边距和内边距都去掉,防止影响页面效果,使用通配符选择器实现该效果。然后将标签的下划线去掉,并且修改字体的大小。最后将列表之前的圆点样式去掉,设置菜单的外边距。代码如下: * { margin: 0; padding: 0; } li { /* 去掉圆点 */ list-style-type: none; } a { /* 去掉下划线 */ text-decoration: none; /* 修改字体大小 */ font-size: 14px; } /* 设置最外层ul的样式 */ .nav { /* 让这个列表显示往屏幕中间一点 */ margin: 100px; }
在之前的css样式中,对该菜单的样子做了基本的设置,接下来需要使用JavaScript代码做互动,就是当鼠标移动到两个一级菜单上时,下面的二级菜单会显示出来。 //1、获取两个一级菜单元素,即两个li:先获取第一层ul,然后获取ul下的子元素li var lis = document.querySelector(".nav").children; //2、循环给两个li绑定鼠标移进去和移出去的事件 for (var i = 0; i //当鼠标移进去时,选择将第一层li(“文件”、“编辑”)下面的第二个子元素li(第一个是a标签)显示出来 this.children[1].style.display = "block"; } lis[i].onmouseout = function () { //当鼠标移出来时,选择将第一层li(“文件”、“编辑”)下面的第二个子元素li(第一个是a标签)隐藏 this.children[1].style.display = "none"; } } 5 全部代码 Document * { margin: 0; padding: 0; } li { /* 去掉圆点 */ list-style-type: none; } a { /* 去掉下划线 */ text-decoration: none; /* 修改字体大小 */ font-size: 14px; } /* 设置最外层ul的样式 */ .nav { /* 让这个列表显示往屏幕中间一点 */ margin: 100px; } /* 子元素选择器选择第一层ul下的li */ .nav>li { width: 100px; height: 41px; float: left; text-align: center; /* 让下拉菜单紧跟在li下面 */ position: relative; } /* 后代选择器选择子孙后代,在这里选择所有的a标签 */ .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: black; border: solid 1px #FECC5B; } .nav>li>a:hover { background-color: #eee; } .nav li ul li a:hover { background-color: #FFF5DA; } /* .nav>li>ul>li>a:hover { background-color: #FFF5DA; } */ .nav ul { display: none; /* 让下拉列表定位在当前li下方 */ position: absolute; } 文件 新建文件 新建窗口 新建文件夹 编辑 撤销 重做 剪切 //1、获取两个一级菜单元素,即两个li:先获取第一层ul,然后获取ul下的子元素li var lis = document.querySelector(".nav").children; //2、循环给两个li绑定鼠标移进去和移出去的事件 for (var i = 0; i //当鼠标移进去时,选择将第一层li(“文件”、“编辑”)下面的第二个子元素li(第一个是a标签)显示出来 this.children[1].style.display = "block"; } lis[i].onmouseout = function () { //当鼠标移出来时,选择将第一层li(“文件”、“编辑”)下面的第二个子元素li(第一个是a标签)隐藏 this.children[1].style.display = "none"; } } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |