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 相关文章推荐
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
Angular 路由route实例代码
Jul 12 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
vue路由插件之vue-route
Jun 13 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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
PHP生成Gif图片验证码
2013/10/27 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
中学生在校期间的自我评价分享
2013/11/13 职场文书
专科应届生求职信
2013/11/24 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
安全标兵事迹材料
2014/08/17 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
基层党组织整改方案
2014/10/25 职场文书
关于迟到的检讨书
2015/05/06 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL