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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
js选项卡的实现方法
Feb 09 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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 sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
List the UTC Time on a Computer
2007/06/11 Javascript
js身份证验证超强脚本
2008/10/26 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python本地与全局命名空间用法实例
2015/06/16 Python
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
学校花圃的标语
2014/06/18 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
生日答谢词
2015/01/05 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
创业计划书之宠物店
2019/09/19 职场文书
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电