当前位置: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
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门