http://blog.sina.com.cn/linpyi[订阅]
字体大小: 正文
JSP下拉导航条(2008-03-25 15:09:04)
 很久以前就想学做那种有下拉框的导航条,可是都不会
找了个,copy下,首先是DIV和JS,用JS来获取所谓的这些导航信息,然后再用CSS控制

<div id="top">
<ul id=nav>
        <li> <a href="./index.jsp">站点首页</a> </li>
        <li> <a>关于我们</a>
            <ul>
              <li> <a href="./aboutUs/companyIntroduce.jsp">·公司简介</a> </li>
              <li> <a href="./aboutUs/developCourse.jsp">·发展历程</a> </li>
              <li> <a href="./aboutUs/enterprisePensee.jsp">·公司理念</a> </li>
              <li> <a href="./aboutUs/techniquePeculiarity.jsp">·技术特点</a> </li>
     <li> <a href="manage.do?businessLogic=showEngageMessage">·诚聘英才</A></li>
            </ul>
        </li>
        <li> <a>产品服务</a>
            <ul>
             
              <li> <a href="./productionService/productionIntroduce.jsp">·产品介绍</a> </li>
              <li> <a href="./productionService/productionDemonstration.jsp">·产品示例</a> </li>
              <li> <a href="./productionService/productionDemo.jsp">·产品演示</a> </li>
              <li> <a href="./productionService/cooperateBuddy.jsp">·合作伙伴</a> </li>
            </ul>
        </li>
        <li> <a>技术支持</a>
            <ul>
              <li> <a href="./technicSustain/familiarQuestion.jsp">·常见问题</a> </li>
              <li> <a href="./technicSustain/customerServicePhone.jsp">·客服电话</a> </li>
            </ul>
        </li>
       <LI>
    <A>平台操作</A>
    <UL>
     <LI>
      <A href="message.do?businessLogic=info">·访客留言</A>
     </LI>
     <LI>
      <A href="manage.do?businessLogic=admin">·管理员管理</A>
     </LI>
     <LI>
     <A href="./message/contactCcsee.jsp">·联系我们</A>
    </LI>
     
    </UL>
   </LI>
  </ul>
  
 
</div><!--top-->  


 <script type=text/javascript>
<!--
    function menuFix() {
        var sfEls = document.getElementById("nav").getElementsByTagName("li");
  //      alert(sfEls.length);
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
   
            sfEls[i].onMouseDown=function() {
                this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
   
            sfEls[i].onMouseUp=function() {
                this.className+=(this.className.length>0? " ": "") + "sfhover";
            }
   
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
            }
        }
    }
    //window.onload=menuFix;
//-->
</script>

 <script>
    menuFix();
    </script>

 

 

CSS

 

   

#nav li{
    float: left;
}


#nav a{
 display:block;
 width: 159px;
    height:25px;
 +heithg:30px;
 text-align:center; 
 font-size:12px;
 color:#fff;
 font-weight:bold;
 text-decoration:none;
 background:url(../images/bg_nav.jpg);
 padding-top:3px;
}

  
#nav a:hover{
    color:#000;
 text-decoration:none;
 background:url(../images/bg_nav_2.jpg);
 font-weight:bold;
           




 
#nav li ul{
    line-height: 24px;
 list-style-type: none;
 text-align:left;
 left: -999em;
 width:156px;
 +width:152px;
 position: absolute;
    border:1px solid #666;
}



#nav li ul a{
    display:block;
 width:156px;
 text-align:left; 
 color:#000;
 text-decoration:none;
    background:#f2f2f2;}


                              
#nav li ul a:hover{
    color:#FFF;
 text-decoration:none;
 font-weight:normal;
 background:#4AB0E3;
 font-weight:bold;
}

#nav li:hover ul{
    left: auto;
}

#nav li.sfhover ul{
    left: auto;
}

#content{
    clear: left;
}

 

 

其实是很简单的不过我讨厌记东西,下次要用再拿来用

 

  • 评论加载中,请稍候...
发评论    明星私家相册

验证码:看不清楚数字吗?点击这里再试试。收听验证码

发评论

以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

相关博文
读取中...
推荐博文
读取中...