■ 自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單

　　序言：

　　隨著互聯(lián)網(wǎng)的普及和網(wǎng)頁制作技術(shù)的發(fā)展，越來越多的網(wǎng)友開始制作自己的網(wǎng)站。做為網(wǎng)站最重要的部分—導(dǎo)航菜單也出現(xiàn)了各式各樣的設(shè)計(jì)和制作方法。其中下拉式導(dǎo)航菜單已經(jīng)成為多欄目大信息量網(wǎng)站的首選導(dǎo)航方式。那么，在下面我將簡(jiǎn)單介紹一下眾多下拉菜單制作方法中完全使用JS自動(dòng)生成的“自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單”的工作原理和使用方法。

　　1、 S下拉菜單原理

　　下拉菜單實(shí)際上就是在開始的時(shí)候顯示一級(jí)或者說是主菜單（圖一）。當(dāng)觸發(fā)條件（例如：鼠標(biāo)移動(dòng)到上面時(shí)）顯示次級(jí)菜單（圖二）。

圖一

圖二

　　那么如何實(shí)現(xiàn)這樣的效果呢。其實(shí)很簡(jiǎn)單。所有的下拉菜單都是通過圖層的顯隱來實(shí)現(xiàn)的。在文件下載的時(shí)候，其實(shí)主菜單和次級(jí)菜單都以經(jīng)形成或者說下載到了客戶端也就是你的機(jī)器里。只是次級(jí)菜單被隱藏起來。隱藏的方法一般是使用javascript 配合css控制次級(jí)菜單的圖層的屬性visibility為隱藏。所以在開始的使用你是看不見次級(jí)菜單的。當(dāng)滿足觸發(fā)條件（例如：鼠標(biāo)移動(dòng)到上面）時(shí)，在使用javascript來控制次級(jí)菜單顯示。當(dāng)在次滿足觸發(fā)條件時(shí)（例如：鼠標(biāo)移開），控制次級(jí)菜單隱藏。

　　我們現(xiàn)在講的這個(gè)“自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單”可以自動(dòng)適應(yīng)瀏覽器分辨率的改變始終保持相對(duì)位置?？梢苑奖愕淖约憾ㄖ撇藛物@示內(nèi)容及連接頁面?？梢噪S意擴(kuò)充主導(dǎo)航和次導(dǎo)航的欄目個(gè)數(shù)?？梢宰杂筛淖冞B接和導(dǎo)航表格的樣式和外觀等等。

　　2、"自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單"js代碼詳解

//--------------- 主導(dǎo)航條內(nèi)容 ------------//
var mainLayer=new Array("藍(lán)色理想","動(dòng)意營造");//主導(dǎo)航欄目

//--------------- 次導(dǎo)航條內(nèi)容 ------------//
var subLayer0=new Array("論壇","文獻(xiàn)"); //導(dǎo)航欄目一下的次級(jí)欄目
var subLayerHttp0=new Array("#","#");//主導(dǎo)航欄目一下的次級(jí)欄目連接地址
var subLayer1=new Array("論壇","文獻(xiàn)");//導(dǎo)航欄目二的次級(jí)欄目
var subLayerHttp1=new Array("#","#");//主導(dǎo)航欄目二的次級(jí)欄目連接地址

//--------------- 主導(dǎo)航條Table參數(shù)調(diào)整 ------------//
var mainTableTdWidth=100; //每個(gè)TD的寬度，調(diào)整主導(dǎo)航內(nèi)容間距
var mainTableBorder=0; //調(diào)整主導(dǎo)航表格邊框?qū)挾?BR>var mainTableCellspacing=0; //調(diào)整主導(dǎo)航表格Cellspacing
var mainTableCellpadding=1; //調(diào)整主導(dǎo)航表格Cellpadding
var mainTableBgcolor="#000000"; //調(diào)整主導(dǎo)航表格背景色
var mainTableBordercolor=""; //調(diào)整主導(dǎo)航表格編框顏色
var mainTableBackgroundImg=""; //調(diào)整主導(dǎo)航表格背景圖片url地址
var hrefClassName="link" //調(diào)整url風(fēng)格樣式
var mainTableTdBgcolor="B2CBCF"; //調(diào)整主導(dǎo)航表格Td色

//--------------- 次導(dǎo)航條Table參數(shù)調(diào)整 ------------//
var subTableBorder=0; //調(diào)整次導(dǎo)航條表格邊框?qū)挾?BR>var subTableCellspacing=0; //調(diào)整次導(dǎo)航條表格Cellspacing
var subTableCellpadding=1; //調(diào)整次導(dǎo)航條表格Cellpadding
var subTableBgcolor="#000000"; //調(diào)整次導(dǎo)航條表格背景色
var subTableBordercolor=""; //次導(dǎo)航條表格編框顏色
var subTableBackgroundImg=""; //次導(dǎo)航條表格背景圖片url地址
var subTableTdBgcolor="B2CBCF"; //調(diào)整次導(dǎo)航表格Td色
var sbuTabbleTop=21; //次導(dǎo)航表格上下微調(diào)
var sbuTabbleLeft=-1; //次導(dǎo)航表格左右微調(diào)

//--------------- 系統(tǒng)參數(shù)*請(qǐng)勿調(diào)整 ------------//
var layerMax=mainLayer.length+10;
var layerName="index";

//--------------- 生成下拉菜單 ------------//
function createMainLayer(){
document.write("

"); for(i=0;idocument.write(""); } document.write(""); for(j=0;jcreateSubLayer(j); } document.write("

");
}

//--------------- 生成每項(xiàng)下拉菜單內(nèi)容 ------------//
function createSubLayer(num){
var subLayerName= layerName +num;
var subLayerLeft=(mainTableTdWidth*num)+mainTableCellpadding+mainTableBorder;
var subLayerList=eval("subLayer"+num);
var subLayerHttpList=eval("subLayerHttp"+num);
document.write("

");

}

//------------------------------次菜單顯隱控制--------------------------//
function layervib(type,num){
var H=type;
var temp=(H='visible'?'hidden':'visible')
for(var i=0;ivar E=eval('document.all.index'+i+'.style');
var H=eval(i);
if(i==num){E.visibility=type}else{E.visibility=temp};
}
}

　　3、"自適應(yīng)分辨率可擴(kuò)展二層JS下拉菜單"js代碼使用方法。

　　(1) 將上面的代碼存儲(chǔ)為js_daohang.js.放在和調(diào)用的頁面同一個(gè)目錄下。
　　(2) 在需要使用的葉面中在如下位置添加

　　來產(chǎn)生菜單。如下例。可以隨意擺放到頁面的任何位置。

　　(4)、如何添加新的主菜單及次級(jí)菜單的欄目。

　　假設(shè)我們要在已有的欄目里新增加一個(gè)“七色鳥”欄目。下面有“論壇”和“文獻(xiàn)”兩個(gè)次級(jí)欄目。那么我么首先要在代碼的如下部分添加“七色鳥”。

var mainLayer=new Array("藍(lán)色理想","動(dòng)意營造","七色鳥");//主導(dǎo)航欄目
0 1 2

　　然后在如下的位置添加“論壇”和“文獻(xiàn)”欄目及連接地址。

var subLayer0=new Array("論壇","文獻(xiàn)"); //導(dǎo)航欄目一下的次級(jí)欄目
var subLayerHttp0=new Array("#","#");//主導(dǎo)航欄目一下的次級(jí)欄目連接地址
var subLayer1=new Array("論壇","文獻(xiàn)");//導(dǎo)航欄目二的次級(jí)欄目
var subLayerHttp1=new Array("#","#");//主導(dǎo)航欄目二的次級(jí)欄目連接地址
var subLayer2=new Array("論壇","文獻(xiàn)");//導(dǎo)航欄目三的次級(jí)欄目
var subLayerHttp2=new Array("#","#");//主導(dǎo)航欄目三的次級(jí)欄目連接地址

　　注意：藍(lán)色部分是需要新添加的部分。紅色部分是要修改的部分。要和上面的編號(hào)一一對(duì)應(yīng)。 (5)、其他細(xì)節(jié)調(diào)整請(qǐng)參考代碼詳解部分。

　　4、附注及擴(kuò)充。

　　代碼中主要使用的函數(shù)及方法詳解。

Document.write("tmp")在頁面中寫入tmp.
var subLayerHttp1=new Array();定義一個(gè)新的數(shù)組subLayerHttp1.
For(I=0;Ivar temp=(H=值1?值2:值3)當(dāng)H的值等于值1的時(shí)候temp等于值2。反之temp的值等于值3。

增強(qiáng)功能。
//--------------- 系統(tǒng)參數(shù)*請(qǐng)勿調(diào)整 ------------//
var layerMax=mainLayer.length+10;
var layerName="index"

可以設(shè)置layerName=其他字段以生成新的下拉菜單。使頁面內(nèi)共存兩個(gè)下拉菜單。