当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery固定底网站底部菜单效果

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

2019年01月20日  | 移动技术网IT编程  | 我要评论

代码如下:


<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>固定底（顶）部菜单</title>
<script type="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: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(../js_date/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(../js_date/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>
<p class="bnav openclose">
<p class="bnav2"><span class="close"><a href="javascript：void(0)" onclick="closenav()" title="关闭">关闭</a></span> 信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示信息显示</p>
</p>
<p class="bnav3 openclose" style="display:none;"><a href="javascript：void(0)" onclick="shownav()" title="打开">打开</a></p>
</body>
</html></td>
   </tr>
 </table>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网