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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
Jquery实现简单的动画效果代码
Mar 18 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
整理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 设计模式之 单例模式
2008/12/19 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
JavaScript基础知识之数据类型
2012/08/06 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python万年历实现代码 含运行结果
2017/05/20 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python图形用户接口实例详解
2019/12/16 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
介绍一下Make? 为什么使用make
2016/07/31 面试题
双语教学实施方案
2014/03/23 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫