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 相关文章推荐
基于jquery用于查询操作的实现代码
May 10 Javascript
jquery 笔记 事件
Nov 02 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
JS跨域代码片段
2012/08/30 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Python序列化pickle模块使用详解
2020/03/05 Python
python语言的优势是什么
2020/06/17 Python
Keras设置以及获取权重的实现
2020/06/19 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
2014年创卫实施方案
2014/02/18 职场文书
公司担保书格式范文
2014/05/12 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
学校食堂标语
2014/10/06 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
党员心得体会范文2016
2016/01/23 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB