javascript簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)菜單效果的方法
本文實(shí)例講述了javascript簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)菜單效果的方法。分享給大家供大家參考。具體如下:
整個(gè)javascript代碼共42行,其中主要函數(shù)Slide代碼26行,可以改進(jìn)哦!
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滑動(dòng)菜單</title> <style> a,body,div,h1,h2,li,ul{ margin:0; padding:0 } a{display:block;text-decoration:none;height:25px;color:#456;background-color:#ABC;cursor:pointer;} a:hover{color:#123;background-color:#789;font-weight:bold;} body{ font:12px/18px "Times New Roman",Times,"宋體",serif; text-align:center; } h1{ height:100px; width:25px; position:absolute; top:-1px; left:123px; cursor:pointer; color:#89A; font-size:18px; line-height:50px; background-color:#234; } h2{ height:24px; font-size:12px; border-bottom:1px solid #4C6CB9; color:#BBB; font-weight:600; cursor:pointer; } li{height:25px;list-style:none} #Container{width:800px;background-color:#DDD;border: 1px solid #999;margin:10px auto} #Top{height:30px;background-color:#DDD;border: 1px solid #999;} #Logo{height:100px;background-color:#DDD;border: 1px solid #999;} #Nav{height:30px;background-color:#DDD;border: 1px solid #999;} #SideBar{ position:fixed!important; position:absolute; top:200px; left:0px; } #SideBar a,#SideBar h2,#SideBar li,#SideBar ul{width:120px} #Main{height:800px;background-color:#DDD;border: 1px solid #999;} #Footer{height:60px;background-color:#DDD;border: 1px solid #999;} .Extracted{width:0px;} .Extrended{border:1px solid #555;background-color:#000;padding:1px} </style> </head> <body> <div id="Container"> <div id="Top">頂條</div> <div id="Logo">Logo</div> <div id="Nav">導(dǎo)航條</div> <div id="SideBar" class="Extrended"> <h1>菜單</h1> <ul> <h2>功能欄1</h2> <li><a href="">功能1</a></li> <li><a href="">功能2</a></li> <li><a href="">功能3</a></li> <li><a href="">功能4</a></li> <li><a href="">功能5</a></li> </ul> <ul> <h2>功能欄2</h2> <li><a href="">功能1</a></li> <li><a href="">功能2</a></li> <li><a href="">功能3</a></li> <li><a href="">功能4</a></li> <li><a href="">功能5</a></li> </ul> <ul> <h2>功能欄3</h2> <li><a href="">功能1</a></li> <li><a href="">功能2</a></li> <li><a href="">功能3</a></li> <li><a href="">功能4</a></li> <li><a href="">功能5</a></li> </ul> <ul> <h2>功能欄4</h2> <li><a href="">功能1</a></li> <li><a href="">功能2</a></li> <li><a href="">功能3</a></li> <li><a href="">功能4</a></li> <li><a href="">功能5</a></li> </ul> <ul> <h2>功能欄5</h2> <li><a href="">功能1</a></li> <li><a href="">功能2</a></li> <li><a href="">功能3</a></li> <li><a href="">功能4</a></li> <li><a href="">功能5</a></li> </ul> <ul> <h2>功能欄6</h2> <li><a href="">功能1</a></li> <li><a href="">功能2</a></li> <li><a href="">功能3</a></li> <li><a href="">功能4</a></li> <li><a href="">功能5</a></li> </ul> </div> <div id="Main">內(nèi)容區(qū)</div> <div id="Footer">底條</div> </div> <script type="text/javascript"> function $(e){return document.getElementById(e)} function Slide(Element,Mod){ var LongthMax,LongthMin,Property,Count=25,Accum,ID,Dlt,DltDlt; if(Mod){ Property='left'; LongthMax=0; LongthMin=-124; } else{ Property='height'; LongthMax=Element.children.length*25; LongthMin=25; } DltDlt=(LongthMax-LongthMin)/(Count*5); if(Element.style[Property]==LongthMax+'px')DltDlt=-DltDlt; Accum=parseInt(Element.style[Property]); Dlt=7*DltDlt; ID=setInterval(function(){ if(Count--){ if(!(Count%5))Dlt-=DltDlt; Accum+=Dlt; Element.style[Property]=Math.floor(Accum)+'px'; return } clearInterval(ID); Element.style[Property]=(DltDlt>0)? LongthMax+'px':LongthMin+'px'; },20); } $('SideBar').style.left='0px'; $('SideBar').children[0].onclick=function(){ Slide(this.parentNode,1); }; (function(Menu,i,tmp){ Menu=document.getElementsByTagName('ul'); for(i=Menu.length;i--;){ tmp=Menu[i]; tmp.style.overflow='hidden'; tmp.style.height='25px'; tmp.children[0].onclick=function(){ Slide(this.parentNode,0); }; } }()); </script> </body> </html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JavaScript+CSS實(shí)現(xiàn)仿天貓側(cè)邊網(wǎng)頁菜單效果
- CSS javascript 結(jié)合實(shí)現(xiàn)懸浮固定菜單效果
- Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果
- javascript實(shí)現(xiàn)在下拉列表中顯示多級(jí)樹形菜單的方法
- Javascript實(shí)現(xiàn)鼠標(biāo)右鍵特色菜單
- javascript實(shí)現(xiàn)超炫的向上滑行菜單實(shí)例
- javascript實(shí)現(xiàn)樹形菜單的方法
- javascript實(shí)現(xiàn)控制的多級(jí)下拉菜單
- JavaScript實(shí)現(xiàn)級(jí)聯(lián)菜單的方法
- JavaScript實(shí)現(xiàn)向右伸出的多級(jí)網(wǎng)頁菜單效果
相關(guān)文章
讓Firefox支持event對(duì)象實(shí)現(xiàn)代碼
FireFox并沒有 window.event ,所以在FireFox下編寫事件處理函數(shù)是很麻煩的事。如果要得到 event 對(duì)象,就必須要聲明時(shí)間處理函數(shù)的第一個(gè)參數(shù)為event2009-11-11js調(diào)用打印機(jī)打印網(wǎng)頁字體總是縮小一號(hào)的解決方法
直接調(diào)用window.print(),但是打印出來后,字體總是縮小一號(hào),后來直接target="_blank",就可以正常打印了,下面是實(shí)現(xiàn)代碼2014-01-01js 右側(cè)浮動(dòng)層效果實(shí)現(xiàn)代碼(跟隨滾動(dòng))
因?yàn)轫?xiàng)目上有這樣的需求,在網(wǎng)上也查了些東西,之前是想找個(gè)差不多類似的套用一下。后來發(fā)覺沒有合適的,因時(shí)間緊迫就自己動(dòng)手寫了一個(gè)簡(jiǎn)單的 ,示例代碼如下 兼容火狐和IE7+2015-11-11JSON數(shù)據(jù)中存在單個(gè)轉(zhuǎn)義字符“\”的處理方法
這篇文章主要介紹了JSON數(shù)據(jù)中存在單個(gè)轉(zhuǎn)義字符“\”的處理方法,在這里反斜杠(又稱右斜杠"\"),還表示轉(zhuǎn)義字符,字符串中不能成單出現(xiàn)。具體內(nèi)容詳情大家跟隨腳本之家小編一起看看吧2018-07-07js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)html滑動(dòng)圖片拼圖驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06javascript設(shè)計(jì)模式 – 工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 工廠模式,結(jié)合實(shí)例形式分析了javascript工廠模式基本概念、原理、定義、應(yīng)用場(chǎng)景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-04-04