js實現(xiàn)二級菜單漸隱顯示

更新時間：2015年11月03日 15:04:19 投稿：lijiao

這篇文章主要介紹了js制作導(dǎo)航菜單實現(xiàn)二級菜單漸隱顯示，感興趣的小伙伴們可以參考一下

先給大家看一看最終的效果圖：

下面就是js實現(xiàn)二級菜單漸隱顯示的代碼：

<!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>導(dǎo)航菜單二級菜單滑動漸隱顯示</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>網(wǎng)站首頁</span></a></li>
        <li class="drop-menu-effect"><a target="_blank" href="javascript:void(0);"><span>內(nèi)容管理</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>系統(tǒng)幫助</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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: