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 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
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/07/05 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python 自动去除空行的实例
2018/07/24 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
python实现QQ批量登录功能
2019/06/19 Python
Python with标签使用方法解析
2020/01/17 Python
Tensorflow 实现释放内存
2020/02/03 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
乡镇三项教育实施方案
2014/03/30 职场文书
合作意向书格式及范文
2014/03/31 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
Python开发简易五子棋小游戏
2022/05/02 Python