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嵌套函数及闭包
Nov 09 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 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生成随机密码的几种方法
2011/01/17 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
经验几则 推荐
2006/09/05 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Python获取任意xml节点值的方法
2015/05/05 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Sanic框架应用部署方法详解
2018/07/18 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
python list格式数据excel导出方法
2018/10/31 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
Python中Unittest框架的具体使用
2019/08/27 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
财务管理专业自荐信范文
2013/12/24 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
创业计划书之网吧
2019/10/10 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python