JS中用三种方式实现导航菜单中的二级下拉菜单


Posted in Javascript onOctober 31, 2016

我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片。那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路。

JS中用三种方式实现导航菜单中的二级下拉菜单

但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考。

1.仅使用html和css

<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
/*关键一:将二级菜单设置为display:none;*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*关键二:在划过二级菜单从属的一级菜单时,设置为display:block;*/
ul li:hover ul{display: block;}
</style>
<div id="nav">
<ul>
<li><a href="">首页</a></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>
</ul>
</li>
<li><a href="">联系我们</a></li>
</ul>
</div>

我们可以看到,这种方法是比较好的,它保证了结构与表现的完全分离。

2.用javasc

<!DOCTYPE htm>
<html lang="en">
<head >
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display:none;}
ul li ul li:hover{background: red;}
</style>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">汽车</a>
<!-- 关键一:在二级标题从属的一级标题标签内设置时间执行程序,this代表的时这个li元素 -->
<ul>
<li><a href="#">奥迪</a> </li>
<li><a href="#">道奇</a> </li>
</ul>
</li>
<li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">手机</a>
<ul>
<li><a href="#">小米</a> </li>
<li><a href="#">华为</a> </li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div> 
script>
function show(li){
var ul=li.getElementsByTagName("ul")[0];
// 关建二:在li这个对象内查询标签名为ul的标签,由于二级标签只有一个,所以索引为0即可。
ul.style.display="block";
// 关键三:当鼠标划过li时,其子元素ul标签的display为block
}
function hide(li){
var ul=li.getElementsByTagName("ul")[0];
ul.style.display="none";
// 关键四:当鼠标划出li时,其子元素ul的display为none
}
/script>

使用javascript实现起来较为麻烦,且这里结构和行为没有分开(虽然可以试用dom在JavaScript中创建使得结构和行为分开,但十分繁琐),不推荐。

3.用jQuery实现

jQuery是一种javascript库,我们可以在jQuery官网上下载最新版本的库文件,其中压缩的文件是用于产品的,为压缩的文件是便于开发人员学习和调试的。下载到本机以后,需要将库文件引用到html中,由于jQuery本质上也是JavaScript,所以引用方式为:

 

<script src="路径名称"></script>

用jQuery实现二级下拉菜单的代码如下:

<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
</style>
<div id="nav">
<ul>
<li><a href="">首页</a></li>
<li class="navmenu"><a href="">汽车</a>
<ul>
<li><a href="#">奥迪</a> </li>
<li><a href="#">道奇</a> </li>
</ul>
</li>
<li class="navmenu"><a href="">手机</a>
<ul>
<li><a href="#">小米</a> </li>
<li><a href="#">华为</a> </li>
</ul>
</li>
<li><a href="">联系我们</a></li>
</ul>
</div> 
<!-- 关键一:引入jQuery库文件 -->
script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
})
})
// 关键二:正确使用jQuey的语法完成行为。
$(function(){
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
})
})
/script>

 显然,使用jQuery是非常方便的。

最终的实现效果如下;

JS中用三种方式实现导航菜单中的二级下拉菜单

即当鼠标划过一级菜单时,会出现相应的二级菜单。

以上所述是小编给大家介绍的JS中用三种方式实现导航菜单中的二级下拉菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
javascript中的new使用
Mar 20 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
浅谈Vue.js
Mar 02 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 #Javascript
JavaScript事件用法浅析
Oct 31 #Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 #Javascript
JavaScript递归操作实例浅析
Oct 31 #Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 #Javascript
Validform表单验证总结篇
Oct 31 #Javascript
Javascript数组中push方法用法分析
Oct 31 #Javascript
You might like
2.PHP入门
2006/10/09 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
JavaScript中的高级函数
2018/01/04 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
优秀教师推荐材料
2014/12/16 职场文书
活动费用申请报告
2015/05/15 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
详解python字符串驻留技术
2021/05/21 Python
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript