jquery固定底网站底部菜单效果
更新时间：2013年08月13日 16:06:14 作者：
本文章来给大家介绍一款固定底网站底部菜单效果，这里是基于jquery的，大家下载之后把jquery加入即可实现效果了，并且兼容性强。
复制代码 代码如下:
<!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>固定底（顶）部菜单</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>
<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></td>
</tr>
</table>
相关文章
这篇文章主要介绍了jQuery中DOM树操作之使用反向插入方法,实例分析了反向插入方法与插入方法回调的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了自定义jQuery插件方式实现强制对象重绘的方法,实例分析了jQuery插件及对象重绘的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JQUERY简单按钮轮换选中效果实现方法,涉及jQuery鼠标事件与css样式操作的基本技巧,需要的朋友可以参考下2015-05-05
jquery开发过程中经验丰富可以提高开发技巧，本文整理了一些常见的jquery开发技巧，有需要的朋友可以参考下2013-01-01
这篇文章主要为大家详细介绍了jQuery点击输入框显示验证码图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了jQuery中next方法用法,实例分析了jQuery中next方法的功能、定义及相关使用技巧,需要的朋友可以参考下2015-04-04
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
这篇文章主要介绍了asp.net+jquery.form实现图片异步上传的方法,结合实例形式分析了jquery.form.js前台异步提交图片与asp.net后台处理的相关技巧,需要的朋友可以参考下2016-05-05
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
这篇文章主要介绍了jQuery实现DIV响应鼠标滑过由下向上展开效果,涉及jQuery基于事件响应结合stop与animate方法控制页面元素属性动态变换相关操作技巧,需要的朋友可以参考下2018-04-04
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
这篇文章主要介绍了使用jQuery+EasyUI实现CheckBoxTree的级联选中特效的相关资料,需要的朋友可以参考下2015-12-12
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleav
这篇文章主要介绍了快速移动鼠标所触发的问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave),非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
最新评论