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实现等比例缩放图片效果插件
Jul 24 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
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
自己前几天写的无限分类类
2007/02/14 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
php时区转换转换函数
2014/01/07 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
Python中的filter()函数的用法
2015/04/27 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
zookeeper python接口实例详解
2018/01/18 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python字符串的拼接方法总结
2019/11/18 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
Linux文件系统类型
2012/09/16 面试题
校长四风对照检查材料
2014/09/27 职场文书
党员个人自我评价
2015/03/03 职场文书
活动新闻稿范文
2015/07/17 职场文书
导游词之任弼时故居
2020/01/07 职场文书
MySQL 计算连续登录天数
2022/05/11 MySQL