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


Posted in Javascript onOctober 31, 2016

最近整理了, JS 实现导航菜单中的二级下拉菜单的三种方式,便于项目中应用。

 如何实现导航菜单栏中的二级下拉菜单?

我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片。

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.用javascript实现

<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>

使用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库文件 -->

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

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

最终的实现效果如下;

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

 感谢阅读,希望能帮助到大家,谢谢大家对本站支持!

Javascript 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 #Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 #Javascript
js学习笔记之事件处理模型
Oct 31 #Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 #Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 #Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 #Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
php框架Phpbean说明
2008/01/10 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
mac上配置Android环境变量的方法
2018/07/08 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
微信小程序合法域名配置方法
2019/05/06 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
初中地理教学反思
2014/01/11 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python