JavaScript 下拉菜单实现代码

最新推荐文章于 2023-11-05 20:49:09 发布
最新推荐文章于 2023-11-05 20:49:09 发布
阅读量1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qikexun/article/details/9140095
版权

利用css+js实现的下拉菜单。通过getElementsByTagName获取ul,隐藏显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>JavaScript下拉菜单</title> 
<style type="text/css"> 
* { 
padding:0; 
margin:0; 
} 
body { 
font-family:verdana, sans-serif; 
font-size:small; 
} 
#navigation, #navigation li ul { 
list-style-type:none; 
} 
#navigation { 
margin:20px; 
} 
#navigation li { 
float:left; 
text-align:center; 
position:relative; 
} 
#navigation li a:link, #navigation li a:visited { 
display:block; 
text-decoration:none; 
color:#000; 
width:120px; 
height:40px; 
line-height:40px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#c5dbf2; 
padding-left:10px; 
} 
#navigation li a:hover { 
color:#fff; 
background:#2687eb; 
} 
#navigation li ul li a:hover { 
color:#fff; 
background:#6b839c; 
} 
#navigation li ul { 
display:none; 
position:absolute; 
top:40px; 
left:0; 
margin-top:1px; 
width:120px; 
} 
#navigation li ul li ul { 
display:none; 
position:absolute; 
top:0px; 
left:130px; 
margin-top:0; 
margin-left:1px; 
width:120px; 
} 
</style> 
<script type="text/javascript"> 
function displaySubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "block"; 
} 
function hideSubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "none"; 
} 
</script> 
</head> 
<body> 
<ul id="navigation"> 
<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"> 
<a href="#">栏目1</a> 
<ul> 
<li><a href="#">栏目1->菜单1</a></li> 
<li><a href="#">栏目1->菜单2</a></li> 
<li><a href="#">栏目1->菜单3</a></li> 
<li><a href="#">栏目1->菜单4</a></li> 
</ul> 
</li> 
<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"> 
<a href="#">栏目2</a> 
<ul> 
<li><a href="#">栏目2->菜单1</a></li> 
<li><a href="#">栏目2->菜单2</a></li> 
<li><a href="#">栏目2->菜单3</a></li> 
<li><a href="#">栏目2->菜单4</a></li> 
<li><a href="#">栏目2->菜单5</a></li> 
</ul> 
</li> 
<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"> 
<a href="#">栏目3</a> 
<ul> 
<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"> 
<a href="#">栏目3->菜单1</a> 
<ul> 
<li><a href="#">菜单1->子菜单1</a></li> 
<li><a href="#">菜单1->子菜单2</a></li> 
<li><a href="#">菜单1->子菜单3</a></li> 
<li><a href="#">菜单1->子菜单4</a></li> 
</ul> 
</li> 
<li><a href="#">栏目3->菜单2</a></li> 
<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"> 
<a href="#">栏目3->菜单3</a> 
<ul> 
<li><a href="#">菜单3->子菜单1</a></li> 
<li><a href="#">菜单3->子菜单2</a></li> 
<li><a href="#">菜单3->子菜单3</a></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html>




源码摘自：http://fanli.pekdo.com

qikexun
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何使用原生js来实现下拉菜单
weixin_75115821的博客
09-27 1188
下拉菜单在页面中存在无非就是显示和隐藏的效果，鼠标滑动到标题显示下拉菜单，离开的使用关闭下拉菜单，但是在显示隐藏的时候会有一个小条件，就是控制鼠标移入移出事件的标签必须是包裹这个标题和下拉列表的，否则就会出现移入标题标签能够显示，但是移除标题标签就直接隐藏了，而我们要的效果是移入标题标签显示下拉菜单，而且移除标题标签，但是鼠标在下拉标签中，下拉菜单是显示的，所以在编写事件的时候，需要注意是由大盒子来控制里面的显示隐藏效果！
javascript案例10——下拉菜单
努力、拼搏、奋进
05-07 7155
一、案例描述 鼠标经过导航栏出现下拉菜单。 二、案例效果演示 三、案例局部代码 css代码： <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } ul { list-style: none; } .nav { text-align: center;
使用js实现简单的下拉菜单
qq_52622178的博客
08-05 5516
全部代码如下，详细注释已在代码注释中。 <!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">
js实现下拉菜单
weixin_62485207的博客
08-23 498
运用jQuery方便快捷的实现下拉菜单。
JavaScript实现下拉菜单
qq_54198615的博客
04-24 2964
样式有些丑陋，各位看官看看就好 下面是代码部分 HTML <ul class="nav"> <li> <h4>水果</h4> <ul class="item"> <li>香蕉</li> <li>苹果</li> <li..
JavaScript简单下拉菜单实例代码
10-23
主要介绍了JavaScript简单下拉菜单,采用JavaScript定时函数递归调用实现菜单渐显效果,非常简单实用,需要的朋友可以参考下
JavaScript下拉菜单功能实例代码
10-20
主要介绍了JavaScript下拉菜单实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
如何使用 JavaScript 构建带有下拉菜单的响应式导航栏
我的博客，不一样的自我表达
05-28 2882
aria-label带有 id 和汉堡包的按钮，aria-haspopup设置为“true”，aria-expanded设置为“false”。这些标签将使我们能够使屏幕阅读器更容易访问此按钮。现在在平板电脑和手机屏幕上，导航栏是响应式的，汉堡包按钮是可见的。这意味着当 dropdown1单击数据集为的按钮时，divid 为的元素dropdown1将记录到控制台，按钮则相反dropdown2。现在，只要下拉菜单可见，该aria-expanded属性就会设置为 true，而在折叠时，它会设置为 false。
js 实现下拉菜单 完整代码
qq_43435403的博客
08-22 4988
一、js实现下拉菜单 二、解题思路： 三、代码： 1.html <ul id="divBox"> <li class="myLi" onclick="openS(this,0)"> <span class="iconfont icon-maobi front"></span> <span class="font">Diseno
js实现树型下拉菜单
11-07
用js实现树型下拉菜单
CSS+JavaScript分别实现下拉菜单效果
02-15
利用CSS和JavaScript分别实现简单的下拉框效果，简单实用，容易上手
自定义js下拉菜单
04-22
html 的 select 控件操作时，会被360杀毒软件监控，操作时会弹出一个警示窗口，影响用户的操作体验。而 button 或者 input 控件的点击则不受360的监控。因此，本作者利用 <div> <input text>控件设计了一歀 js 下拉菜单，避免了360监控弹出的警示窗口，使得用户的操作体验流畅多了。
JavaScript实现二级联动下拉菜单(附完整源码)
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 454
JavaScript实现二级联动下拉菜单(附完整源码)
9个你会喜欢的 JavaScript 菜单实现方案
程序员成长指北
09-14 501
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群当你设计网站时，网站导航是一个非常重要的考虑因素。它是你网站中的主要元素，可能也是用户交互最多的元素。尽管我们可以通过 HTML 和 CSS 创建一个简单菜单，但结合JavaScript 可以帮助提高创造力并改善整体用户体验。JavaScript 菜单是让导航菜单脱颖而出的绝妙方式，添加的功能让一...
JavaScript（js）网页--下拉菜单制作
热门推荐
Dreamer
11-19 1万+
JavaScript（js）网页–下拉菜单制作 在网页的设计中，经常会出现二级下拉菜单，当鼠标经过时，显示二级菜单，鼠标离开时隐藏。例如新浪网 鼠标放到微博、博客或邮箱上面时，会出现一个二级菜单，鼠标离开则隐藏。 设计简单的下拉菜单栏 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt
JS实现导航栏下拉
weixin_51747920的博客
06-30 1476
通过JavaScript实现导航栏下拉显示与隐藏功能。当鼠标移入时，通过设置display属性值为block，使下拉表显示；而当鼠标移出时，将display属性值设置为none，使得下拉表隐藏。在JS中onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
用JavaScript表示日期的下拉菜单代码
09-01
以下是用 JavaScript 表示日期的下拉菜单代码： ```html <select id="year"></select> <select id="month"></select> <select id="day"></select> // 获取当前年份 var currentYear = new Date().getFullYear(); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值