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是非常方便的。

最终的实现效果如下;

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

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

时间: 2016-10-28

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

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

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

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

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

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

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

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

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&

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

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

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

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

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

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

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

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

js+CSS实现模拟华丽的select控件下拉菜单效果

本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:

js实现全国省份城市级联下拉菜单效果代码

本文实例讲述了js实现全国省份城市级联下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个大家都知道的网页小功能,很常见,全国省份与城市级联菜单,采用Select下拉的方式选择数据,不过现在很多都Ajax了,貌似这种老形式已经过时了,不过在兼容性方面,仍然是不落后的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-conv-city-xl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI

js实现点击向下展开的下拉菜单效果代码

本文实例讲述了js实现点击向下展开的下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍js实现点击向下展开的下拉菜单特效代码,无调用jQuery,真正的JS下拉菜单,兼容性方面未做测试,觉得有用处的自己测试修正吧,本文仅提供基础的代码供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

js 单击式的下拉菜单效果实例

复制代码 代码如下: <!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"> <head> <meta http-equiv=&qu

JS实现样式清新的横排下拉菜单效果

本文实例讲述了JS实现样式清新的横排下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款灰色调横排清新的下拉菜单,完全符合WEB标准,兼容性不错,菜单简洁好用,适合大部分的网页风格.如果色调不是你想要的,自己发挥聪明才智,修改一下吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-style-hp-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

js实现简洁大方的二级下拉菜单效果代码

本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效果看上去相当实用,下拉导航菜单也是大家比较常用的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2level-show-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-/

js+css实现超简洁的二级下拉菜单效果代码

本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

JS+CSS实现的经典圆角下拉菜单效果代码

本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu