JavaScript实现网页下拉菜单效果
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue.js下拉菜单组件使用方法详解
本文实例为大家分享了Vue.js下拉菜单组件的具体实现代码,供大家参考,具体内容如下 效果 #### 入口页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
-
纯JS实现出生日期[年月日]下拉菜单效果
在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用JS实现年.月.日3个下拉框的日期选择.具体代码如下: 1.新建一个js文件,如birthday.js; function DateSelector(selYear, selMonth, selDay) {//定义函数 this.selYear = selYear; this.selMonth = s
-
js阻止默认右键的下拉菜单方法
需求 正常情况下,我们有可能遇到需要右键不显示下拉菜单的情况,让页面显得更加软件话,删除多余的功能,增加性能. 实现代码 document.oncontextmenu = function (event) { event.preventDefault(); }; 在触发右键下拉菜单的时候,直接阻止掉浏览器的默认事件,就实现了该效果. 以上这篇js阻止默认右键的下拉菜单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
最近博主在边学flask边写测试平台,碰到一个比较常用的场景如下图所示 这里有一个输入框组,下拉菜单里面有3个选项,还有一个输入框,代码是用 bootstrap写的,代码也给大家贴出来 <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
-
JavaScript实现HTML导航栏下拉菜单
JavaScript实现HTML导航栏下拉菜单[悬浮显示] 前端界面进行设计时,我们会遇到鼠标悬浮在某选项上,然后就会凭空显示出菜单出来,这种设计的确受到了很多人的青睐.其实纯css也是可以实现的,但是会有一些限制,必须如要显示的菜单需要作为鼠标悬浮元素的子元素,选择器优先级等等.废话不多说,直接看效果! 样式有点丑. 代码实现(JavaScript) 1.获取要悬浮的对象和菜单对象 //获取需要悬浮的对象 let show = document.getElementById("show&quo
-
js实现按钮开关单机下拉菜单效果
通过onclick单击事件,实现效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>开关按钮设置</title> </head> <link rel="stylesheet" href="css/Default style sheet.css" rel="exte
-
浅谈Vue.js中如何实现自定义下拉菜单指令
我们利用 Vue.js 的自定义指令能力,来实现一个自定义下拉菜单功能.描述如下: 点击按钮,弹出下拉菜单. 点击下拉菜单之外的区域,关闭下拉菜单. 1基础版 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="styleshee
-
js面向对象封装级联下拉菜单列表的实现步骤
本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时,选择菜单后会在文本框中显示. 打开后的级联菜单效果如图所示: 使用实例中封装好的插件,只需要有一个input元素,即可通过插件自动生成级联下拉菜单,html代码如下所示: <div style="margin-top:100px;text-align:center;"> <
-
js动态设置select下拉菜单的默认选中项实例
利用javascript设置select下拉菜单的选中项. 代码实例如下: <!--js动态设置select下拉菜单的默认选中项--> <html> <head> <title>下拉菜单</title> <script type="text/javascript"> window.onload=function(){ var osel=document.getElementById("selID"
-
js 下拉菜单点击旁边收起实现(踩坑记)
背景: 最近在搞一个需求:搜索框,输入时显示联想词下拉列表,当点击联想词跳转到搜索页,如果点击其他部分收起联想的下拉列表.接到需求后第一反应用失焦(blur)去做收起操作避免body的监控,随后就踩坑里了,下面情景再现,一步一步来看这个问题的解决(里面的demo等会用vue实现) 带有bug的版本演示图 备注:最后的搜索跳转我直接用console代替掉了,但是并没有执行 问题抛出 当我点击上面的联想词的时候它的onSearch并不能执行 demo代码展示 <template lang="h