新浪下拉菜单(js原生版本)

效果展示：

代码展示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0px;padding: 0px;}ul {list-style: none;/* background-color: red; *//* width: 800px; */}#fold {margin: 100px auto;width: 85%;}#fold>li {float: left;width: 100px;text-align: center;}#fold>li>a {background-color: lightgray;display: inline-block;width: 100px;height: 30px;line-height: 30px;color: orange;text-decoration: none;}#fold>li>ul {display: none;}#fold>li>ul li:hover {background-color: darkorange;}</style></head><body><div id="container"><ul id="fold"><li><a href="#">微博</a><ul><li>评论</li><li>店铺</li><li>发文</li></ul></li><li><a href="#">微博</a><ul><li>评论</li><li>店铺</li><li>发文</li></ul></li><li><a href="#">微博</a><ul><li>评论</li><li>店铺</li><li>发文</li></ul></li><li><a href="#">微博</a><ul><li>评论</li><li>店铺</li><li>发文</li></ul></li></ul></div><script>//获取li元素对象var uls = document.querySelector('#fold');var lis = uls.children; //获取uls节点下面的所有子元素节点// console.log(lis);//循环给每个li注册事件for (var i=0;i<lis.length;i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script></body>
</html>

新浪下拉菜单(js原生版本)相关推荐

新浪下拉菜单案例淘宝服饰精品案例
目录 1.新浪下拉菜单 2.淘宝服饰精品 1.新浪下拉菜单利用jQuery基础选择器$("选择器") 选择对应的方法实现实现效果实现代码 <script>$(fu ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
JS 新浪下拉菜单+jQuery
思考:首先在CSS布局上就出错了,导致后面设置JS时就有很大的问题 <!DOCTYPE html> <html lang="en"><head> ...
js的项目1:世纪佳缘、京东关闭广告、新浪下拉菜单、开关灯案例
1.世纪佳缘用户名显示隐藏内容 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
js新浪下拉菜单 pink
在这里插入代码片 ```<!DOCTYPE html> <html><head><meta charset="utf-8">< ...
b站pink老师JavaScript的jQuery 案例代码——新浪下拉菜单
目录 jQuery中:[使用jquery,记得要引入jquery文件] 用到的重点代码/原理: 1.原案例版本(不简洁,效果较为僵硬) 2.简洁+优化1.0版部分:(中等简洁,效果较柔和) 3.简洁+ ...
html5地区下拉菜单,JS特效：地区下拉菜单
可变的下拉菜单是网页中非常常见的一项功能,现在给大家做一个非常简单的实现,原理很简单,本质就是元素的显示与隐藏.代码如下大家试试. HTML 西安市铜川市宝鸡市未央区莲湖区新城区碑林区雁 ...
html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单
个人信息维护学生信息修改修改密码--%> 修改密码--%> 修改密码--%> 退出登录用户: 所在班级: js文件 //个人信息维护下拉菜单样式 $(function () { ...
获取html下拉菜单selected,原生js获取select下拉框的selected的option项
一. 使用原生js,获取select标签下属性有selected的option项. 先写一个select标签如下: TEXT-aaaaa TEXT-bbbbb 原生js获取select标签这个对象 ...

新浪下拉菜单(js原生版本)

新浪下拉菜单(js原生版本)相关推荐

最新文章

热门文章