分享一款固定在页面底部的菜单。
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定底(顶)部菜单-www.jb200.com</title> <script type="text/javascript" src="/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:0 1%; border:#B4B4B4 1px solid; border-bottom:none; z-index:999; position:fixed; bottom:0; left:0; _position:absolute;/* for IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; } .close { position:absolute; right:5px; height:25px; width:16px; text-indent:-9999px; padding-left:10px; } .close a { background:url(/images/20110603/close.gif) no-repeat center; 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:0 1%; padding-right:6px; border-bottom:none; z-index:999; position:fixed; bottom:0; right:0; _position:absolute;/* for IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; } .bnav3 a { background:url(/images/20110603/open.gif) no-repeat center; display:block; height:25px; width:16px; text-indent:-5000px; } </style> </head> <body> <script type="text/javascript"> var closeBN = $.cookie("bnav"); if (closeBN == "0"){closeNav();} function showNav(){ $(".openClose").toggle(); $.cookie("bnav", "1", {expires: 1}); } function closeNav(){ $(".openClose").toggle(); $.cookie("bnav", "0", {expires: 1}); } </script> <div class="bnav openClose"> <div class="bnav2"><span class="close"><a href="javascript:void(0)" onclick="closeNav()" title="关闭">关闭</a></span> 脚本学堂,欢迎大家的光临。这里是菜单部分。</div> </div> <div class="bnav3 openClose" style="display:none;"><a href="javascript:void(0)" onclick="showNav()" title="打开">打开</a></div> </body> </html>