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 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
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
星际RPG字典
2020/03/04 星际争霸
PHP 七大优势分析
2009/06/23 PHP
PHP经典面试题集锦
2015/03/19 PHP
js left,right,mid函数
2008/06/10 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python创建关联数组(字典)的方法
2015/05/04 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
优秀本科毕业生自荐信
2014/07/04 职场文书
开发房地产协议书
2014/09/14 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
市级三好学生评语
2014/12/29 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js