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 相关文章推荐
JS创建类和对象的两种不同方式
Aug 08 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 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 魔术函数使用说明
2010/05/14 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Python图算法实例分析
2016/08/13 Python
python读取文本中的坐标方法
2018/10/14 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
pandas数据处理之绘图的实现
2020/06/15 Python
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
学校后勤人员职责
2013/12/27 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
保护环境倡议书范文
2014/05/13 职场文书
学生安全承诺书
2014/05/22 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android