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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
jQuery cdn使用介绍
May 08 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
js数组的操作指南
Dec 28 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
webpack的pitching loader详解
Sep 23 Javascript
js布局实现单选按钮控件
Jan 17 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
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
python字符串过滤性能比较5种方法
2017/06/22 Python
Python虚拟环境项目实例
2017/11/20 Python
python抓取文件夹的所有文件
2018/02/27 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
python 实用工具状态机transitions
2020/11/21 Python
优秀体育委员自荐书
2014/01/31 职场文书
党员岗位承诺书
2014/03/25 职场文书
诚信承诺书范文
2014/03/27 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
Python OpenGL基本配置方式
2022/05/20 Python
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js