jQuery實現導航欄

時間 2019-11-08
標籤 jquery 實現導航欄目 JQuery 简体版
原文原文鏈接
參考：jQuery權威指南
jQuery初步
 jQuery選擇器
 jQuery操做dom
jQuery操做dom事件
 jQuery插件
 jQuery操做Ajax
jQuery動畫與特效
 jQuery實現導航欄
 jQuery實現點擊式選項卡
 jQuery實現select三級聯動javascript
實現效果：css
代碼以下：html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< style type = "text/css" >
     body{
         font-size: 13px;
     }
     ul,li{
         list-style-type: none;
         padding: 0px;
         margin: 0px;       
     }
     .menu{
         width: 180px;
         border:solid 1px #E5D1A1;
         background-color: #FFFDD2;
     }
     .optn{
         width: 180px;
         line-height: 28px;
         border-top: dashed 1px #ccc;
     }
     .content{
         padding-top: 10px;
         clear: left;
     }
     a{
         text-decoration: none;
         color: #666;
         padding: 10px;     
     }
     .optnFocus{
         background-color: #fff;
         font-weight: bold;
     }
     div{
         padding: 10px;
     }
     span{
         padding-top: 3px;
         font-size: 14px;
         font-weight: bold;
         float: left;
     }
     .tip{
         width: 190px;
         border: solid 2px #ffa200;
         position: absolute;
         padding: 10px;
         background-color: #fff;
         display: none;
     }
     .tip li{
         line-height: 23px;     
     }
}
</ style >
< script type = "text/javascript" src = "jquery-1.4.4.js" ></ script >
< script type = "text/javascript" >
     $(function(){
         var curY;//所選項的top值
         var curH;//所選項的Height值
         var curW;//所選項的Width值
         var srtY;//設置提示箭頭的top值
         var srtX;//設置提示箭頭的left值
         var objL;//獲取當前對象
  
         function setInitValue(obj){
             curY = obj.offset().top
             curH = obj.height();
             curW = obj.width();        
         }
  
         $(".optn").mouseover(function() {
             objL = $(this);
             setInitValue(objL);
             var ally = curY - curH +"px";
             objL.addClass('optnFocus');
             objL.next("ul").show().css({"top":ally,"left":curW})   
         }).mouseout(function() {
             $(this).removeClass('optnFocus');
             $(this).next("ul").hide();         
         });
  
         $(".tip").mousemove(function() {
             $(this).show();
             objL = $(this).prev("li");
             setInitValue(objL);
             objL.addClass('optnFocus');
  
         }).mouseout(function(event) {
             $(this).hide();
             $(this).prev("li").removeClass('optnFocus');       
         });
  
  
  
     });
</ script >
< title >jQuery實現導航欄</ title >
</ head >
< body >
     < ul >
         < li class = "menu" >
             < div >
                 < span >電腦數碼產品</ span >
             </ div >
             < ul class = "content" >
                 < li class = "optn" >< a href = "#" >筆記本</ a ></ li >
                 < ul class = "tip" >
                     < li >< a href = "#" >筆記本1</ a ></ li >
                     < li >< a href = "#" >筆記本2</ a ></ li >
                     < li >< a href = "#" >筆記本3</ a ></ li >
                     < li >< a href = "#" >筆記本4</ a ></ li >
                     < li >< a href = "#" >筆記本5</ a ></ li >
                 </ ul >
                 < li class = "optn" >< a href = "#" >移動硬盤</ a ></ li >
                 < ul class = "tip" >
                     < li >< a href = "#" >移動硬盤1</ a ></ li >
                     < li >< a href = "#" >移動硬盤2</ a ></ li >
                     < li >< a href = "#" >移動硬盤3</ a ></ li >
                     < li >< a href = "#" >移動硬盤4</ a ></ li >
                     < li >< a href = "#" >移動硬盤5</ a ></ li >
                 </ ul >
                 < li class = "optn" >< a href = "#" >電腦軟件</ a ></ li >
                 < ul class = "tip" >
                     < li >< a href = "#" >電腦軟件1</ a ></ li >
                     < li >< a href = "#" >電腦軟件2</ a ></ li >
                     < li >< a href = "#" >電腦軟件3</ a ></ li >
                     < li >< a href = "#" >電腦軟件4</ a ></ li >
                     < li >< a href = "#" >電腦軟件5</ a ></ li >
                 </ ul >
                 < li class = "optn" >< a href = "#" >數碼產品</ a ></ li >
                 < ul class = "tip" >
                     < li >< a href = "#" >數碼產品1</ a ></ li >
                     < li >< a href = "#" >數碼產品2</ a ></ li >
                     < li >< a href = "#" >數碼產品3</ a ></ li >
                     < li >< a href = "#" >數碼產品4</ a ></ li >
                     < li >< a href = "#" >數碼產品5</ a ></ li >
                 </ ul >
             </ ul >
         </ li >
     </ ul >
</ body >
</ html >
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。