提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery固定底网站底部菜单效果

jQuery网站 效果 菜单 固定 底部
2023-06-13 09:15:04 时间
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>固定底（顶）部菜单</title>
<scripttype="text/javascript"src="../js_date/js/jquery.js"></script>
<style>
body{padding:0;margin:0;font-size:12px;font-family:Arial;word-break:break-all;word-wrap:break-word;}
.bnav{text-align:left;height:25px;overflow:hidden;width:98%;line-height:25px;background:#fff;margin:01%;border:#B4B4B41pxsolid;border-bottom:none;z-index:999;position:fixed;bottom:0;left:0;_position:absolute;/*forIE6*/_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);/*forIE6*/
overflow:visible;}
.close{position:absolute;right:5px;height:25px;width:16px;text-indent:-9999px;padding-left:10px;}
.closea{background:url(../js_date/images/20110603/close.gif)no-repeatcenter;width:16px;display:block;}
.bnav2{height:24px;line-height:24px;margin:1px;margin-bottom:0;background:#E5E5E5;}
.bnav3{height:25px;width:16px;line-height:25px;margin:01%;padding-right:6px;border-bottom:none;z-index:999;position:fixed;bottom:0;right:0;_position:absolute;/*forIE6*/_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);/*forIE6*/
overflow:visible;}
.bnav3a{background:url(../js_date/images/20110603/open.gif)no-repeatcenter;display:block;height:25px;width:16px;text-indent:-5000px;}
</style>
</head>
<body>
<scripttype="text/javascript">
varcloseBN=$.cookie("bnav");
if(closeBN=="0"){closeNav();}
functionshowNav(){
$(".openClose").toggle();
$.cookie("bnav","1",{expires:1});
}
functioncloseNav(){
$(".openClose").toggle();
$.cookie("bnav","0",{expires:1});
}
</script>
<divclass="bnavopenClose">
<divclass="bnav2"><spanclass="close"><ahref="javascript:void(0)"onclick="closeNav()"title="关闭">关闭</a></span>信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示</div>
</div>
<divclass="bnav3openClose"style="display:none;"><ahref="javascript:void(0)"onclick="showNav()"title="打开">打开</a></div>
</body>
</html></td>
  </tr>
 </table>

相关文章