js实现二级菜单渐隐显示


Posted in Javascript onNovember 03, 2015

先给大家看一看最终的效果图:

js实现二级菜单渐隐显示

下面就是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="Content-Type" content="text/html;charset=gb2312" />
  <title>导航菜单二级菜单滑动渐隐显示</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style type="text/css"> 
    {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    a, img
    {
      border: 0;
    }
    a, a:visited
    {
      color: #5e5e5e;
      text-decoration: none;

    }

    a:hover
    {
      color: #333;
      text-decoration: underline;
    }
    body
    {
      font: 12px/180% Arial,Lucida,Verdana, "宋体" ,Helvetica,sans-serif;
      color: #333;
      background: #fff;
    }
    /* navbox */

    .navbox, .nav li, .nav li.current a, .nav li.selected a span, .nav li a.selected, .nav li a.selected span

    {
      background: url(images/headerbg.png) no-repeat;

    }
    .navbox
    {
      height:39px;
      background-position:0 -138px;
      background-repeat:repeat-x;
      position: relative;
      z-index:9;       
    }
    .nav
    {
      width: 960px;
      margin: 0 auto;
    }
    .nav li
    {
      float: left;
      height: 39px;
      background-position: 100% -99px;
      padding: 0 3px 0 2px;
      position: relative;
    }
    .nav li.last
    {
      background: none;
    }
    .nav li a
    {
      float: left;
      display: block;
      padding: 0 0 0 4px;
      height: 39px;
      overflow: hidden;
    }
    .nav li a span
    {
      float: left;
      display: block;
      padding: 0 4px 0 0;
      line-height: 39px;
      font-size: 14px;
      color: #fff;
      font-weight: 800;
      cursor: pointer;
      width: 142px;
      text-align: center;
    }
    .nav li.selected a, .nav li a.selected
    {
      background-position: 0 -60px;
      text-decoration: none;
    }
    .nav li.selected a span, .nav li a.selected span
    {
      background-position: 100% -60px;
      color: #ff7e00;
    }
    .nav li.selected .submenu
    {
      display: block;
    }
    .nav li .submenu
    {
      display: none;
      position: absolute;
      top: 39px;
      left: 6px;
    }
    .nav li .submenu

    {
      border-style: solid;
      border-width: 0px 1px 1px 1px;
      border-color: #ddd;
      padding: 0 5px 5px 5px;
      width: 132px;
      background: #fff;
    }
    .nav li .submenu
    {
      -moz-border-radius: 0 0 3px 3px;
      -webkit-border-radius: 0 0 3px 3px;
      border-radius: 0 0 3px 3px;
      -moz-box-shadow: 0 5px 5px #D3D3D3;
      -webkit-box-shadow: 0 5px 5px #D3D3D3;
      box-shadow: 0 5px 5px #D3D3D3;
    }
    .nav li .submenu li
    {
      float: none;
      padding: 0;
      background: none;

      height:auto;

      border-bottom:dotted 1px #BEBEBE;

    }
    .nav li .submenu li.last
    {
      border: none;
    }
    .nav li .submenu li a
    {
      float:none;
      padding:0;
      text-align:center;
      height:28px;
      line-height:28px;

      background:none;
    }
    .nav li .submenu li a:hover
    {
      background:#ddd;
      font-weight:800; 
    }
  </style>
</head>
<body>
  <script type="text/javascript">
    function dropMenu(obj) {
      $(obj).each(function () {
        var theSpan = $(this);
        var theMenu = theSpan.find(".submenu");
        var tarHeight = theMenu.height();
        theMenu.css({ height: 0, opacity: 0 });
        theSpan.hover(
      function () {
        $(this).addClass("selected");
        theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 400);
      },
      function () {
        $(this).removeClass("selected");

        theMenu.stop().animate({ height: 0, opacity: 0 }, 400, function () {
          $(this).css({ display: "none" });

        });
      }
    );
     });
    }
 
    $(document).ready(function () {
      dropMenu(".drop-menu-effect");
    });
  </script>
  <div class="navbox">
    <div class="nav">
      <ul class="clearfix">
        <li><a class="selected" target="_blank" href="javascript:void(0);"><span>网站首页</span></a></li>
        <li class="drop-menu-effect"><a target="_blank" href="javascript:void(0);"><span>内容管理</span></a>
          <ul class="submenu">
            <li><a href="#">普通文章</a></li>
            <li><a href="#">专题文章</a></li>
            <li><a href="#">材料文章</a></li>
          </ul>
        </li>
        <li class="drop-menu-effect"><a target="_blank" href="javascript:void(0);"><span>系统帮助</span></a>
          <ul class="submenu">
            <li><a href="#">参考文档</a></li>
            <li><a href="#">意见反馈</a></li>
            <li><a href="#">官方交流论坛</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
我的javascript 函数链之演变
Apr 07 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
整理JavaScript创建对象的八种方法
Nov 03 #Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 #Javascript
jQuery实用技巧必备(下)
Nov 03 #Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 #Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 #Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 #Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 #Javascript
You might like
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python ZipFile模块详解
2013/11/01 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
使用Python写个小监控
2016/01/27 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
python如何删除文件中重复的字段
2019/07/16 Python
python实现的自动发送消息功能详解
2019/08/15 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
python 瀑布线指标编写实例
2020/06/03 Python
后勤自我鉴定
2013/10/13 职场文书
考试退步检讨书
2014/01/15 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
党员入党表决心的话
2014/03/11 职场文书
党委班子剖析材料
2014/08/21 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2015年除四害工作总结
2015/07/23 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js