JS 实现导航菜单中的二级下拉菜单的几种方式

最近整理了, 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 实现导航菜单中的二级下拉菜单的几种方式

最终的实现效果如下;

即当鼠标划过一级菜单时,会出现相应的二级菜单。

感谢阅读,希望能帮助到大家,谢谢大家对本站支持!

时间: 2016-10-28

js实现兼容性好的微软官网导航下拉菜单效果

本文实例讲述了js实现兼容性好的微软官网导航下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款微软官网导航菜单,兼容好的下拉菜单,微软官网导航效果,在IE6下没有动画效果,顺便也把IE6的效果给加上,兼容IE6.现在微软的官方网站正在使用,我觉得非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-microsoft-web-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-/

原生JS实现导航下拉菜单效果

这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消失.为了便于理解我画了一个图,如下: 在这个案例主要用到的知识有:设置定时器,清除定时器,mouseout和mouseover事件,另外还有css中position相关知识.本案例分为两部分讲解.第一部分html和css,第二部分js. 一. html和css 将导航这个导航条包裹在一个div中,这

顶部缓冲下拉菜单导航特效的JS代码

复制代码 代码如下: <script type="text/javascript">            $(function() {                var d=300;                $('#navigation a').each(function(){                    $(this).stop().animate({                        'marginTop':'-80px'       

jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

JS中用三种方式实现导航菜单中的二级下拉菜单

我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片.那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style

jQuery实现的简洁下拉菜单导航效果代码

本文实例讲述了jQuery实现的简洁下拉菜单导航效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现简洁下拉菜单导航效果,代码规范,兼容性方面:支持 IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+.简洁明快的jquery网站菜单,请参阅代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-down-show-menu-nav-codes/ 具体代码

JS实现快速的导航下拉菜单动画效果附源码下载

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 查看演示     下载源码 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav<span aria-hidden=&qu

基于JS快速实现导航下拉菜单动画效果附源码下载

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示         源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&

jquery实现简单的二级导航下拉菜单效果

本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl

javascript仿京东导航左侧分类导航下拉菜单效果

本文实例为大家分享了类似于京东.淘宝商城左侧分类导航下拉菜单,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <

JavaScript实现带箭头标识的多级下拉菜单效果

本文实例讲述了JavaScript实现带箭头标识的多级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个支持多级显示的JS菜单,鼠标移向带有小三角的菜单项,可下拉出二级子菜单项,在该主菜单的上方会显示标记,指引当前的位置,本菜单代码使用了一个JS类,可根据代码地址自行下载,这个菜单未在网上测试,用在自己的网站里可能要修改代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-focus-m-select-menu-nav-codes/

Bootstrap导航条鼠标悬停下拉菜单

Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹出二级菜单. 效果图: CSS修改: <style type="text/css"> .navbar .nav > li .dropdown-menu { margin: 0; } .navbar .nav > li:hover .dropdown-menu { display: block; } <

jQuery实现的导航下拉菜单效果示例

本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

jquery实现适用于门户站的导航下拉菜单效果代码

本文实例讲述了jquery实现适用于门户站的导航下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款应用了jQuery+CSS共同编写实现的网页导航菜单,采用浅蓝色的布局方式,整体格调淡雅清新,简洁大方,不失为一款好菜单.本特点的特点是兼容好,在火狐/IE下都有良好表现,而且在有二级子菜单的地方,主菜单上都会有一个小三角标识,很好的提升了用户体验,相信你也会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-i

jquery实现二级导航下拉菜单效果

下拉菜单实现很简单,纯css也能实现,但是我不擅长,用jquery也就两行代码,于是就用jquery+css实现简单二级下拉菜单导航,分享给大家供大家参考,具体内容如下 运行效果图: 具体代码: 第一步:确定导航的html格式 <ul id="nav"> <li><a href="#">首页</a> <ul> <li><a href="#">PHP编程</a

jQuery实现的导航下拉菜单效果

本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <div id="navigation"> <ul> <li><a href="#">首 页</a></li> <li><a href="#">衬 衫</a> <ul> <li><a hr

JavaScript实现非常简单实用的下拉菜单效果

本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code

JS模拟bootstrap下拉菜单效果实例

本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的