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动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
jQuery实现简单弹幕制作
Dec 10 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
php5.2时间相差8小时
2007/01/15 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
几种tab切换详解
2017/02/03 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python获取当前路径实现代码
2017/05/08 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
Python networkx包的实现
2020/02/14 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
创业者是否需要商业计划书?
2014/02/07 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
党员个人总结自评
2015/02/14 职场文书
单身申明具结书
2015/02/26 职场文书
观后感的写法
2015/06/19 职场文书
初二英语教学反思
2016/02/15 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python