當前位置:96看吧 > 實用代碼 > 導航菜單 > 始終懸浮在網頁右側的導航菜單

始終懸浮在網頁右側的導航菜單

時間:2013/06/29
作者:未知
來源:互聯網
查看:
標簽:導航菜單

始終懸浮在網頁右側的導航菜單

導航菜單特別適合做網站客服使用。jQuery導航菜單特點:始終懸浮在網頁右側并可依次展開。借助jQuery實現+css實現。96看吧推薦做網站客服。

該導航菜單的style的代碼如下:

  1. <style type="text/css">  
  2. * { margin:0padding:0list-style-type:none; }  
  3. a, img { border:0text-decoration:none; }  
  4. body { font:12px/180% ArialHelveticasans-serif"新宋體"background:#DCDCDC; }  
  5. /* nav */ 
  6. .nav { position:fixed; top:0; right:0z-index:9999width:140pxcursor:pointermargin:100px 0 0 0; }  
  7. *html, *html body /* 修正IE6振動bug */ { background-image:url(about:blank); background-attachment:fixed; }  
  8. *html .nav { position:absolute; top:expression(eval(document.documentElement.scrollTop));  
  9. }  
  10. .nav a { display:blockposition:relativeheight:30pxline-height:30pxmargin-bottom:2pxbackground:#fffpadding-right:10pxwidth:130pxoverflow:hiddencolor:#333cursor:pointer; right:-110px; }  
  11. .nav a:hover { text-decoration:nonecolor:#1974A1; }  
  12. .nav a:hover span { background:#5FA429 }  
  13. .nav a span { display:blockfloat:leftwidth:30pxbackground:#636871color:#ffffont-size:16pxtext-align:centermargin-right:10pxfont-style:normal; }  
  14. </style> 

該jQuery導航菜單的jQuery代碼如下(記得使用前加載jQuery組件):

  1. <script type="text/javascript">  
  2. var btb=$(".nav");  
  3. var tempS;  
  4. $(".nav").hover(function(){  
  5.     var thisObj = $(this);  
  6.     tempS = setTimeout(function(){  
  7.         thisObj.find("a").each(function(i){  
  8.             var tA=$(this);  
  9.             setTimeout(function(){  
  10.                 tA.animate({right:"0"},300);  
  11.             },50*i);  
  12.         });  
  13.     },200);  
  14. },function(){  
  15.     if(tempS){  
  16.         clearTimeout(tempS);  
  17.     }  
  18.     $(this).find("a").each(function(i){  
  19.         var tA=$(this);  
  20.         setTimeout(function(){  
  21.             tA.animate({right:"-110"},300,function(){  
  22.             });  
  23.         },50*i);  
  24.     });  
  25. });  
  26. </script> 

 

上一篇:純css實現固定在網頁底部導航菜單
下一篇:懶人圖庫jquery導航菜單
演示地址
Demo
下載地址
Down
頁面舉報
Report
關閉頁面
Close
收藏頁面
Favorites
分享頁面
Share
版權信息:欄目內,站內會員所分享的全部“資源/素材/文章”,僅供學習與參考,版權為原作者所有。
下載提示:非注冊用戶每天可下載一個文件,已注冊會員不受限制。
相關最新
相關熱門
老11选5预测