主页 / 网络编程 /

js实现二级菜单渐隐显示

网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了js制作导航菜单实现二级菜单渐隐显示，感兴趣的小伙伴们可以参考一下

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

狼蚁网站SEO优化就是js实现二级菜单渐隐显示的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./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;
      : 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.s().show().animate({ height: tarHeight, opacity: 1 }, 400);
      },
      function () {
        $(this).removeClass("selected");

        theMenu.s().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前端开发之实现二进制读写操作 下一篇：整理JavaScript创建对象的八种方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by