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 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
深入浅析react native es6语法
Dec 09 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python机器学习之神经网络(三)
2017/12/20 Python
numpy基础教程之np.linalg
2019/02/12 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Django多个app urls配置代码实例
2020/11/26 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
物流创业计划书
2014/02/01 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
领导干部作风建设总结
2014/10/23 职场文书
政府会议通知范文
2015/04/15 职场文书
早恋主题班会
2015/08/14 职场文书