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


Posted in Javascript onAugust 13, 2013
<!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>
Javascript 相关文章推荐
javascript的创建多行字符串的7种方法
Apr 29 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
node中的cookie的具体使用
Sep 13 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
js 三级关联菜单效果实例
Aug 13 #Javascript
js 单击式的下拉菜单效果实例
Aug 13 #Javascript
让元素在网页中可拖动示例代码
Aug 13 #Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 #Javascript
JavaScript的Module模式编程深入分析
Aug 13 #Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 #Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 #Javascript
You might like
调整PHP的性能
2013/10/30 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
Python Cookie 读取和保存方法
2018/12/28 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
网络技术支持面试题
2013/04/22 面试题
绝对经典成功的大学生推荐信
2013/11/08 职场文书
前处理班长职位说明书
2014/03/01 职场文书
2014年人大工作总结
2014/12/10 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
体育活动总结
2015/02/04 职场文书
刑事法律意见书
2015/06/04 职场文书