jQuery实现可关闭固定于底（顶）部的工具条菜单效果

本文实例讲述了jQuery实现可关闭固定于底（顶）部的工具条菜单效果。分享给大家供大家参考，具体如下：

这是一款可关闭始终在页面底部的工具条菜单，浮动在页面顶部的大家见的比较多了，本款从形式上来说与其它的没什么差别，只是浮动在页面的最底部，带一关闭按钮，一般来说，此效果可用作广告条、网站提示以及一些需要用户特别注意的地方。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-fixed-buttom-adv-line-codes/

具体代码如下：

body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
li{list-style:none;}img{border:none;}em{font-style:normal;}
a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
a:hover{color:#000;text-decoration:underline;}
body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
.bnav{ text-align:left;height:25px;overflow:hidden;width:98%;line-height:25px;background:#fff; margin:0 1%;border:#B4B4B4 1px solid; border-bottom:none;z-index:999;position:fixed;bottom:0;left:0;_position:absolute;_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);  overflow:visible;}
.close{position:absolute;right:5px;height:25px;width:16px;text-indent:-9999px;padding-left:10px;}
.close a{background:url(images/close.gif) no-repeat center; width:16px;display:block;}
.bnav2{height:24px;line-height:24px; margin:1px; margin-bottom:0;background:#E5E5E5; }
.bnav .s1{ position:absolute;left:10px;}
.bnav .s1 img{ padding-top:3px;margin-right:7px;}
.bnav .s2{ position:absolute;right:30px; color:#888;}
.bnav .s2 span{ padding-right:10px;}
.bnav .s2 a{margin:0 6px;}
.rolltext{position:absolute;left:160px;height:25px;line-height:25px; overflow: hidden;}
.rolltext dt,.rolltext dd{float:left;width: auto;}
.rolltext a{display:block;height:25px;overflow:hidden;}
.bnav3{height:25px;width:16px;line-height:25px; margin:0 1%; padding-right:6px;border-bottom:none;z-index:999;position:fixed;bottom:0;right:0;_position:absolute;_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);  overflow:visible;}
.bnav3 a{background:url(images/open.gif) no-repeat center; display:block;height:25px;width:16px; text-indent:-5000px;}





 
  
   
  
  

   
特别声明：
   

    庆双节期间，商城有专人值班，请上帝们放心购物
    天悦所售手机为大陆行货、全国联保商品
    部分少量港行、欧行机器我们都已特别注明
    请上帝们就不要再咨询同类问题啦，客服电话要爆喽
   
  
  
   [登录][免费注册]购物车|帮助中心|在线留言
  
  关闭
 

打开

希望本文所述对大家jQuery程序设计有所帮助。