Javascript制作下拉菜單.docx

《Javascript制作下拉菜單.docx》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、Javascript篇制作下拉菜單--自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單序言做為網(wǎng)站最重要的部分—導(dǎo)航菜單有各式各樣的設(shè)計(jì)和制作方法。其中下拉式導(dǎo)航菜單已經(jīng)成為多欄目大信息量網(wǎng)站的首選導(dǎo)航方式。下面將簡(jiǎn)單介紹一下眾多下拉菜單制作方法中完全使用JS自動(dòng)生成的“自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單”的工作原理和使用方法。1.S下拉菜單原理下拉菜單實(shí)際上就是在開(kāi)始的時(shí)候顯示一級(jí)或者說(shuō)是主菜單（圖一）。當(dāng)觸發(fā)條件（例如：鼠標(biāo)移動(dòng)到上面時(shí)）顯示次級(jí)菜單（圖二）。圖一圖二如何實(shí)現(xiàn)這樣的效果呢。其實(shí)很簡(jiǎn)單。所有的

2、下拉菜單都是通過(guò)圖層的顯隱來(lái)實(shí)現(xiàn)的。在文件下載的時(shí)候，其實(shí)主菜單和次級(jí)菜單都以經(jīng)形成或者說(shuō)下載到了客戶端也就是你的機(jī)器里。只是次級(jí)菜單被隱藏起來(lái)。隱藏的方法一般是使用javascript配合css控制次級(jí)菜單的圖層的屬性visibility為隱藏。所以在開(kāi)始的使用你是看不見(jiàn)次級(jí)菜單的。當(dāng)滿足觸發(fā)條件（例如：鼠標(biāo)移動(dòng)到上面）時(shí)，在使用javascript來(lái)控制次級(jí)菜單顯示。當(dāng)在次滿足觸發(fā)條件時(shí)（例如：鼠標(biāo)移開(kāi)），控制次級(jí)菜單隱藏。我們現(xiàn)在講的這個(gè)“自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單”可以自動(dòng)適應(yīng)瀏覽

3、器分辨率的改變始終保持相對(duì)位置?？梢苑奖愕淖约憾ㄖ撇藛物@示內(nèi)容及連接頁(yè)面?？梢噪S意擴(kuò)充主導(dǎo)航和次導(dǎo)航的欄目個(gè)數(shù)。可以自由改變連接和導(dǎo)航表格的樣式和外觀等等。2."自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單"js代碼詳解//---------------主導(dǎo)航條內(nèi)容------------//varmainLayer=newArray("藍(lán)色理想","動(dòng)意營(yíng)造");//主導(dǎo)航欄目//---------------次導(dǎo)航條內(nèi)容------------//varsubLayer0=newArray("論壇","

4、文獻(xiàn)");//導(dǎo)航欄目一下的次級(jí)欄目varsubLayerHttp0=newArray("#","#");//主導(dǎo)航欄目一下的次級(jí)欄目連接地址varsubLayer1=newArray("論壇","文獻(xiàn)");//導(dǎo)航欄目二的次級(jí)欄目varsubLayerHttp1=newArray("#","#");//主導(dǎo)航欄目二的次級(jí)欄目連接地址//---------------主導(dǎo)航條Table參數(shù)調(diào)整------------//varmainTableTdWidth=100;//每個(gè)TD的寬度，調(diào)整主導(dǎo)航

5、內(nèi)容間距varmainTableBorder=0;//調(diào)整主導(dǎo)航表格邊框?qū)挾葀armainTableCellspacing=0;//調(diào)整主導(dǎo)航表格CellspacingvarmainTableCellpadding=1;//調(diào)整主導(dǎo)航表格CellpaddingvarmainTableBgcolor="#000000";//調(diào)整主導(dǎo)航表格背景色varmainTableBordercolor="";//調(diào)整主導(dǎo)航表格編框顏色varmainTableBackgroundImg="";//調(diào)整主導(dǎo)航表格背

6、景圖片url地址varhrefClassName="link"http://調(diào)整url風(fēng)格樣式varmainTableTdBgcolor="B2CBCF";//調(diào)整主導(dǎo)航表格Td色//---------------次導(dǎo)航條Table參數(shù)調(diào)整------------//varsubTableBorder=0;//調(diào)整次導(dǎo)航條表格邊框?qū)挾葀arsubTableCellspacing=0;//調(diào)整次導(dǎo)航條表格CellspacingvarsubTableCellpadding=1;//調(diào)整次導(dǎo)航條表格Cellpad

7、dingvarsubTableBgcolor="#000000";//調(diào)整次導(dǎo)航條表格背景色varsubTableBordercolor="";//次導(dǎo)航條表格編框顏色varsubTableBackgroundImg="";//次導(dǎo)航條表格背景圖片url地址varsubTableTdBgcolor="B2CBCF";//調(diào)整次導(dǎo)航表格Td色varsbuTabbleTop=21;//次導(dǎo)航表格上下微調(diào)varsbuTabbleLeft=-1;//次導(dǎo)航表格左右微調(diào)//---------------系統(tǒng)

8、參數(shù)*請(qǐng)勿調(diào)整------------//varlayerMax=mainLayer.length+10;varlayerName="index";//---------------生成下拉菜單------------//functioncreateMainLayer(){document.write("