当前位置：首页 → 问答吧 → 共享自己刚写的一个二级导航

共享自己刚写的一个二级导航

时间：2009-03-25

来源：互联网

研究了一下,写出一个不专业的二级导航菜单,自己没学过JS,不太懂编程规则,就会点XHTML和CSS,刚学JQUERY,写出一个东西不容易,共享一下,里面用了一stop函数,本来想找一个能销毁函数的函数,不过没找着,只有用stop才好用,算是一个BUG,不过一般人用不出来,除非闲着没事玩菜单,高人如果找到解决方案告知一声,内容挺简单,高手勿笑
放出代码:

<html>
<head>
<title>table test</title>
<script type="text/javascript" language="javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
$(function(){
               $("#nav_super li a").hover(SubMenuFadeIn,SubMenuFadeOut)
                   function SubMenuFadeIn(){
                    var indexValue=$("#nav_super li a").index(this);
                    var tempMenuId="subnav_"+(indexValue+1);
                    $("#"+tempMenuId).fadeIn("fast");
                }
                function SubMenuFadeOut(){
                    var indexValue=$("#nav_super li a").index(this);
                    var tempMenuId="subnav_"+(indexValue+1);
                    $("#"+tempMenuId).fadeOut(50);
                }
             })
$(function(){
           $("div[id^='subnav_']").hover(function(){
                                                  $(this).stop();
                                                  },function(){
                                                      $(this).fadeOut(50);
                                                      })
           })
</script>
<style>
body{padding:0; margin:0; font-family:"Microsoft Sans Serif",Verdana, Geneva, sans-serif; background:#fff;}
ul{ list-style:none;}
h1,h2,h3,h4,h5,ul,p,form{margin:0; padding:0;}
#nav{ position:relative; padding-left:300px; height:26px; background:#ccc;}
#nav_super li{ float:left;}
#nav_super a{ display:block; width:60px; height:26px; padding:0 10px; color:#fff; font-size:14px; font-weight:700; line-height:26px;   text-decoration:none;

outline:none;}
#nav_super a:hover{ background:url(../img/nav_hover.gif) no-repeat center;  }
#nav_super .thissys,#header #nav #nav_super .thissys:hover{ background:url(../img/thissys.gif) no-repeat center; color:#0061e6;}
.submenu{ position:absolute; margin-top:26px; background:#e9e9e9; -moz-border-radius-bottomleft:2px; -moz-border-radius-bottomright:2px; -webkit-border-

bottom-right-radius:1px; -webkit-border-bottom-left-radius:1px;-moz-box-shadow: 2px 2px 2px #666;-webkit-box-shadow: 2px 2px 2px #666;}
.submenu li{float:left;}
.submenu li a{display:block; height:26px;padding:0 10px; font-size:14px;  font-weight:400;line-height:26px;text-decoration:none; outline:none;

color:#050505;}
.submenu li a:hover{ background:#d9d9d9;  color:#333333;}
* html .submenu{position:absolute;   background:#e9e9e9; }
* html .submenu li a{ display:block; float:left; height:26px;padding:0 10px; font-size:14px;  font-weight:400;line-height:26px;text-decoration:none;

outline:none;color:#333;}
#subnav_1{}
* html #subnav_1{margin-left:-400px;}
#subnav_2{ margin-left:80px;}
* html #subnav_2{margin-left:-320px;}
#subnav_3{ margin-left:160px;}
* html #subnav_3{margin-left:-240px;}
</style>
</head>
<body>
<div id="nav">
            <ul id="nav_super">
                <li>
                <a href="#" class="nav_super">日报管理</a>
                </li>
              <li><a href="#" class="thissys">缺陷管理</a></li>
              <li><a href="#">财务管理</a></li>
              <li><a href="#">人事管理</a></li>
               <li><a href="#">变更管理</a></li>
            </ul>
            <div id="subnav_1" class="submenu" style="display:none;">
                    <ul>
                        <li><a href="#">新建日报</a></li>
                        <li><a href="#">业务定制</a></li>
                        <li><a href="#">邮件定制</a></li>
                        <li><a href="#">管理</a></li>
                    </ul>
                </div>
            <div id="subnav_2" class="submenu" style="display:none;">
                    <ul>
                        <li><a href="#">报告BUG</a></li>
                        <li><a href="#">系统设置</a></li>
                        <li><a href="#">个人主页</a></li>
                    </ul>
                </div>
            <div id="subnav_3" class="submenu" style="display:none;"  >
                    <ul>
                        <li><a href="#">工资查询</a></li>
                        <li><a href="#">系统设置</a></li>
                        <li><a href="#">个人主页</a></li>
                    </ul>
                </div>
        </div>
</body>
</html>
看效果的时候别忘了找你自己的JQUERY包,名字自己改
没有版权,喜欢的拿去用

作者: ztfljy 发布时间: 2009-03-25

感谢楼主分享！

作者: shawphy 发布时间: 2009-03-25

共享自己刚写的一个二级导航

热门阅读

热门下载