JavaScript（js）网页–下拉菜单制作

在网页的设计中，经常会出现二级下拉菜单，当鼠标经过时，显示二级菜单，鼠标离开时隐藏。例如新浪网

鼠标放到微博、博客或邮箱上面时，会出现一个二级菜单，鼠标离开则隐藏。

设计简单的下拉菜单栏

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下拉菜单</title><style>*{margin: 0;padding: 0;}a{text-decoration: none;}div {width: 1200px;height: 30px;margin: 0px auto;background-color: blanchedalmond;}li {list-style: none;}div li {position: relative;float: right;text-align: center;border: 1px solid black;line-height: 30px;width: 80px;height: 30px;}div ul {position: absolute;top:30px;display: none;}div ul li{float: left;width: 120px;height: 30px;background-color: pink;}</style>
</head>
<body><div><li><a href="#">邮箱</a><ul><li><a href="#">免费邮箱</a></li><li><a href="#">VIP邮箱</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></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></li></div><script>var div = document.querySelector('div');var lis = div.children;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>

JavaScript（js）网页--下拉菜单制作相关推荐

JavaScript（js）网页–下拉菜单制作
JavaScript(js)网页–下拉菜单制作在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏.例如新浪网鼠标放到微博.博客或邮箱上面时,会出现一个二级菜单,鼠标 ...
15个精心挑选的 jQuery 下拉菜单制作教程
下拉菜单是网站导航常用的表现形式之一,能够呈现更多的导航内容.如果网站能够设计出有吸引力的网站导航,将会吸引更多的用户去浏览网站的内容.今天本文就为大家挑选了25个非常好的 jQuery 下拉菜单制作 ...
js实现下拉菜单动画效果
js实现下拉菜单动画效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
vue.js bootstrap 下拉列表_Excel下拉菜单制作的小技巧
在工作中,常常需要对多行多列的数据设置下拉菜单,但在使用数据验证,设置下拉菜单时,序列来源是不能执行引用多行多列区域的,否则即会出现下图提示框,应该如何进行设置呢? 第一步:定义名称框鼠标依次点击公 ...
用JS控制下拉菜单效果
今天,突然想复习下之前学习做导航菜单的一些知识.之后觉得下拉菜单非常好玩儿,于是自己试着用JS调出了效果.网上有众多方法,但是感觉不是很对我的胃口,我喜欢HTML/CSS/JavaScript分离着写 ...
html下拉菜单制作方法,CSS3制作Dropdown下拉菜单的方法
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id="comment"的位置,俗 ...
html JS实现下拉菜单,vue.js怎么实现下拉框
本文环境:windows7.vue2.9.6,该方法适用于所有品牌的电脑. vue.js实现下拉框的方法: www.php.cn vue下拉框 {{x.name}}{{x.famname}} {{on ...
使用Jquery、HTML、CSS、JS实现下拉菜单列表
下拉菜单列表当鼠标进入时,效果如下: 鼠标离开时,下拉列表进行隐藏.效果如下: 下面展示代码 // <!DOCTYPE html> <html lang="en" ...
html+css简单下拉菜单制作
额,今天心血来潮做了个简单的下拉菜单,不过用的css操作的,啧! 最终效果: 代码: <!DOCTYPE html> <html> <head><title& ...

JavaScript（js）网页--下拉菜单制作

JavaScript（js）网页–下拉菜单制作

JavaScript（js）网页--下拉菜单制作相关推荐

最新文章

热门文章