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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
微信小程序 教程之模板
Oct 18 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 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
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
初学python数组的处理代码
2011/01/04 Python
python自动zip压缩目录的方法
2015/06/28 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
Python之os操作方法(详解)
2017/06/15 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
给护士表扬信
2014/01/19 职场文书
2014年大学生工作总结
2014/11/20 职场文书
自荐信格式模板
2015/03/27 职场文书
作弊检讨书范文
2015/05/06 职场文书
六年级作文之家庭作文
2019/12/12 职场文书