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 相关文章推荐
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
vue 中的keep-alive实例代码
Jul 20 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数据流应用的简单例子
2012/06/01 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
python with (as)语句实例详解
2020/02/04 Python
python实现打砖块游戏
2020/02/25 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
举例讲解Python装饰器
2020/12/24 Python
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
工程班组长岗位职责
2013/12/30 职场文书
80后婚前协议书范本
2014/10/24 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
七年级作文之雪景
2019/11/18 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS