jquery實(shí)現(xiàn)頂部向右伸縮的導(dǎo)航區(qū)域代碼
本文實(shí)例講述了jquery實(shí)現(xiàn)頂部向右伸縮的導(dǎo)航區(qū)域代碼。分享給大家供大家參考。具體如下:
這是一款類似導(dǎo)航的菜單,但擴(kuò)展性比較強(qiáng),不但可以用作菜單,更可以用作導(dǎo)航塊效果,導(dǎo)航塊內(nèi)可以含有菜單或者是其它的一些功能,本效果基于jQuery實(shí)現(xiàn),用鼠標(biāo)點(diǎn)擊浮動(dòng)層左端的箭頭,即可合攏與伸開此菜單。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-right-hidden-show-nav-style-codes/
具體代碼如下:
<!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>鼠標(biāo)單擊控制收縮和展開的窗口</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> *{margin:0;padding:0;} #box{position:absolute;right:0;top:0;overflow:hidden;} #arrow{color:#fff;background:#000;width:20px;height:90px;line-height:90px;font-size:12px;font-family:"宋體";text-align:center;font-weight:bold;float:left;} #col_box{width:400px;height:90px;background:#eee;float:left;} </style> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var oMoveBox = $("#col_box"), oArr = $("#arrow"), maxL = 400; oArr.click(function(){ oMoveBox.animate({"width":"-="+maxL},600,function(){ maxL = -maxL; $("#arrow").html(maxL<0 ? "<" : ">"); }) }); }); </script> </head> <body> <div id="box"> <div id="arrow">></div> <div id="col_box">z<br>z<br>s<br>k<br>y</div> </div> </body> </html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
- jquery實(shí)現(xiàn)紅色豎向多級(jí)向右展開的導(dǎo)航菜單效果
- jquery實(shí)現(xiàn)點(diǎn)擊向下展開菜單項(xiàng)(伸縮導(dǎo)航)效果
- jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級(jí)導(dǎo)航菜單效果代碼
- jQuery實(shí)現(xiàn)簡單下拉導(dǎo)航效果
- jquery實(shí)現(xiàn)簡單的二級(jí)導(dǎo)航下拉菜單效果
- jquery實(shí)現(xiàn)美觀的導(dǎo)航菜單鼠標(biāo)提示特效代碼
- jquery實(shí)現(xiàn)點(diǎn)擊變換導(dǎo)航樣式的方法
- jQuery實(shí)現(xiàn)簡單的列表式導(dǎo)航菜單效果代碼
- jquery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后展開列表內(nèi)容的導(dǎo)航欄效果
相關(guān)文章
jQuery實(shí)現(xiàn)多級(jí)下拉菜單jDropMenu的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)多級(jí)下拉菜單jDropMenu的方法,涉及jquery鼠標(biāo)事件及頁面元素遍歷的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08jQuery中setTimeout的幾種使用方法小結(jié)
jQuery 中 setTimeout/setInterval 不能像在原生態(tài) javascript 中那樣使用, 否則會(huì)報(bào)錯(cuò).2013-04-04jQuery實(shí)現(xiàn)調(diào)整表格單列順序完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)調(diào)整表格單列順序的方法,結(jié)合完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件及動(dòng)態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JQuery中模擬image的ajaxPrefilter與ajaxTransport處理
這篇文章主要介紹了JQuery中模擬image的ajaxPrefilter與ajaxTransport處理,本文直接給出模擬實(shí)現(xiàn)代碼,代碼中包含詳細(xì)注釋,需要的朋友可以參考下2015-06-0620款非常優(yōu)秀的 jQuery 工具提示插件 推薦
工具提示(Tooltip)在網(wǎng)站中的一個(gè)小功能,但卻有很重要的作用,常用于顯示一些溫馨的提示信息。如果網(wǎng)站中的工具提示功能做得非常有創(chuàng)意的話能夠加深用戶對(duì)網(wǎng)站印象2012-07-07jQuery結(jié)合CSS制作漂亮的select下拉菜單
對(duì)于我來說,標(biāo)準(zhǔn)的HTML元素(Select)已經(jīng)讓我感到討厭。它不能夠正常的在IE瀏覽器上顯示。還有一點(diǎn)就是他并不僅僅包含簡單的文本。本實(shí)例將完全摒棄select元素,通過JQuery和CSS來構(gòu)建DropDown元素。2015-05-05jQuery操作checkbox選擇(list/table)
本文將介紹下checkbox list選擇及checkbox table選中附效果圖,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04使用Jquery實(shí)現(xiàn)點(diǎn)擊文字后變成文本框且可修改
使用Jquery實(shí)現(xiàn)點(diǎn)擊文字變?yōu)槲谋究蛐Ч?,可?duì)文本框文字進(jìn)行修改,具體的實(shí)現(xiàn)思路如下,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-09-09