自適應分辨率可擴展二層JS下拉菜單
序言：
隨著互聯網的普及和網頁制作技術的發展，越來越多的網友開始制作自己的網站。做為網站最重要的部分—導航菜單也出現了各式各樣的設計和制作方法。
其中下拉式導航菜單已經成為多欄目大信息量網站的首選導航方式。那么，在下面我將簡單介紹一下眾多下拉菜單制作方法中完全使用JS自動生成的“自適應分辨
率可擴展二層JS下拉菜單”的工作原理和使用方法。
1、 S下拉菜單原理
下拉菜單實際上就是在開始的時候顯示一級或者說是主菜單（圖一）。當觸發條件（例如：鼠標移動到上面時）顯示次級菜單（圖二）。
圖一
圖二
那么如何實現這樣的效果呢。其實很簡單。所有的下拉菜單都是通過圖層的顯隱來實現的。在文件下載的時候，其實主菜單和次級菜單都以經形成或者說下
載到了客戶端也就是你的機器里。只是次級菜單被隱藏起來。隱藏的方法一般是使用javascript
配合css控制次級菜單的圖層的屬性visibility為隱藏
。所以在開始的使用你是看不見次級菜單的。當滿足觸發條件（例如：鼠標移動到上面）時，在使用javascript來控制次級菜單顯示。當在次滿足觸發條件時（例如：鼠標移開），控制次級菜單隱藏。
我們現在講的這個” 自適應分辨率可擴展二層JS下拉菜單”可以自動適應瀏覽器分辨率的改變始終保持相對位置。可以方便的自己定制菜單顯示內容及連接頁面。可以隨意擴充主導航和次導航的欄目個數。可以自由改變連接和導航表格的樣式和外觀等等。
2、"自適應分辨率可擴展二層JS下拉菜單"js代碼詳解
//--------------- 主導航條內容 ------------//
var mainLayer=new Array("藍色理想","動意營造");//主導航欄目
//--------------- 次導航條內容 ------------//
var subLayer0=new Array("論壇","文獻"); //導航欄目一下的次級欄目
var subLayerHttp0=new Array("#","#");’’;//主導航欄目一下的次級欄目連接地址
var subLayer1=new Array("論壇","文獻");//導航欄目二的次級欄目
var subLayerHttp1=new Array("#","#");//主導航欄目二的次級欄目連接地址
//--------------- 主導航條Table參數調整 ------------//
var mainTableTdWidth=100; //每個TD的寬度，調整主導航內容間距
var mainTableBorder=0; //調整主導航表格邊框寬度
var mainTableCellspacing=0; //調整主導航表格Cellspacing
var mainTableCellpadding=1; //調整主導航表格Cellpadding
var mainTableBgcolor="#000000"; //調整主導航表格背景色
var mainTableBordercolor=""; //調整主導航表格編框顏色
var mainTableBackgroundImg=""; //調整主導航表格背景圖片url地址
var hrefClassName="link" //調整url風格樣式
var mainTableTdBgcolor="B2CBCF"; //調整主導航表格Td色
//--------------- 次導航條Table參數調整 ------------//
var subTableBorder=0; //調整次導航條表格邊框寬度
var subTableCellspacing=0; //調整次導航條表格Cellspacing
var subTableCellpadding=1; //調整次導航條表格Cellpadding
var subTableBgcolor="#000000"; //調整次導航條表格背景色
var subTableBordercolor=""; //次導航條表格編框顏色
var subTableBackgroundImg=""; //次導航條表格背景圖片url地址
var subTableTdBgcolor="B2CBCF"; //調整次導航表格Td色
var sbuTabbleTop=21; //次導航表格上下微調
var sbuTabbleLeft=-1; //次導航表格左右微調
//--------------- 系統參數*請勿調整 ------------//
var layerMax=mainLayer.length+10;
var layerName=”index”
//--------------- 生成下拉菜單 ------------//
function createMainLayer(){
document.write("
");
for(i=0;i
document.write("");
}
document.write("
");
for(j=0;j
createSubLayer(j);
}
document.write(" |
");
}
//--------------- 生成每項下拉菜單內容 ------------//
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("
");
if(subLayerList.length!=0){
document.write("
for(h=0;h
document.write("");
}
document.write("
");
}
document.write("
");
}
//------------------------------次菜單顯隱控制--------------------------//
function layervib(type,num){
var H=type;
var temp=(H='visible'?'hidden':'visible')
for(var i=0;i
var E=eval('document.all.index'+i+'.style');
var H=eval(i);
if(i==num){E.visibility=type}else{E.visibility=temp};
}
}
3、"自適應分辨率可擴展二層JS下拉菜單"js代碼使用方法。
(1) 將上面的代碼存儲為js_daohang.js.放在和調用的頁面同一個目錄下。
(2) 在需要使用的葉面中在如下位置添加
來產生菜單。如下例。可以隨意擺放到頁面的任何位置。
(4)、如何添加新的主菜單及次級菜單的欄目。
假設我們要在已有的欄目里新增加一個“七色鳥”欄目。下面有“論壇”和“文獻”兩個次級欄目。那么我么首先要在代碼的如下部分添加“七色鳥”。
var mainLayer=new Array("藍色理想","動意營造",”七色鳥”);//主導航欄目
0 1 2
然后在如下的位置添加“論壇”和“文獻”欄目及連接地址。
var subLayer0=new Array("論壇","文獻"); //導航欄目一下的次級欄目
var subLayerHttp0=new Array("#","#");’’;//主導航欄目一下的次級欄目連接地址
var subLayer1=new Array("論壇","文獻");//導航欄目二的次級欄目
var subLayerHttp1=new Array("#","#");//主導航欄目二的次級欄目連接地址
var subLayer2=new Array("論壇","文獻");//導航欄目三的次級欄目
var subLayerHttp2=new Array("#","#");//主導航欄目三的次級欄目連接地址
注意：藍色部分是需要新添加的部分。紅色部分是要修改的部分。要和上面的編號一一對應。 (5)、其他細節調整請參考代碼詳解部分。
4、附注及擴充。
代碼中主要使用的函數及方法詳解。
Document.write(“tmp”)在頁面中寫入tmp.
var subLayerHttp1=new Array();定義一個新的數組subLayerHttp1.
For(I=0;I
var temp=(H=值1?值2:值3)當H的值等于值1的時候temp等于值2。反之temp的值等于值3。
增強功能。
//--------------- 系統參數*請勿調整 ------------//
var layerMax=mainLayer.length+10;
var layerName=”index”
可以設置layerName=其他字段以生成新的下拉菜單。使頁面內共存兩個下拉菜單。
如有任何問題請聯系我。Jiangyf@paic.com.cn
全文完。