js实现二级菜单渐隐显示

作者：bea

先给大家看一看最终的效果图：下面就是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 ht

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

下面就是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>

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

有用 | 无用

js实现二级菜单渐隐显示

猜你喜欢

您可能感兴趣的文章: