jquery固定底網(wǎng)站底部菜單效果
更新時間：2013年08月13日 16:06:14 作者：
本文章來給大家介紹一款固定底網(wǎng)站底部菜單效果，這里是基于jquery的，大家下載之后把jquery加入即可實(shí)現(xiàn)效果了，并且兼容性強(qiáng)。
復(fù)制代碼 代碼如下:
<!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="關(guān)閉">關(guān)閉</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>
相關(guān)文章
jQuery中DOM樹操作之使用反向插入方法實(shí)例分析
這篇文章主要介紹了jQuery中DOM樹操作之使用反向插入方法,實(shí)例分析了反向插入方法與插入方法回調(diào)的使用技巧,需要的朋友可以參考下2015-01-01
自定義jQuery插件方式實(shí)現(xiàn)強(qiáng)制對象重繪的方法
這篇文章主要介紹了自定義jQuery插件方式實(shí)現(xiàn)強(qiáng)制對象重繪的方法,實(shí)例分析了jQuery插件及對象重繪的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
JQUERY簡單按鈕輪換選中效果實(shí)現(xiàn)方法
這篇文章主要介紹了JQUERY簡單按鈕輪換選中效果實(shí)現(xiàn)方法,涉及jQuery鼠標(biāo)事件與css樣式操作的基本技巧,需要的朋友可以參考下2015-05-05
jquery開發(fā)過程中經(jīng)驗(yàn)豐富可以提高開發(fā)技巧，本文整理了一些常見的jquery開發(fā)技巧，有需要的朋友可以參考下2013-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery點(diǎn)擊輸入框顯示驗(yàn)證碼圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了jQuery中next方法用法,實(shí)例分析了jQuery中next方法的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-04-04
asp.net+jquery.form實(shí)現(xiàn)圖片異步上傳的方法(附j(luò)query.form.js下載)
這篇文章主要介紹了asp.net+jquery.form實(shí)現(xiàn)圖片異步上傳的方法,結(jié)合實(shí)例形式分析了jquery.form.js前臺異步提交圖片與asp.net后臺處理的相關(guān)技巧,需要的朋友可以參考下2016-05-05
jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果示例【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果,涉及jQuery基于事件響應(yīng)結(jié)合stop與animate方法控制頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
使用jQuery+EasyUI實(shí)現(xiàn)CheckBoxTree的級聯(lián)選中特效
這篇文章主要介紹了使用jQuery+EasyUI實(shí)現(xiàn)CheckBoxTree的級聯(lián)選中特效的相關(guān)資料,需要的朋友可以參考下2015-12-12
快速移動鼠標(biāo)觸發(fā)問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleav
這篇文章主要介紹了快速移動鼠標(biāo)所觸發(fā)的問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleave),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08