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 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
JS实现购物车特效
Feb 02 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
使用python生成目录树
2018/03/29 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
深入了解python中元类的相关知识
2019/08/29 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
材料工程专业毕业生求职信
2014/03/04 职场文书
亚运会口号
2014/06/20 职场文书
暑期培训班招生方案
2014/08/26 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
李强为自己工作观后感
2015/06/11 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript