自適應解析度可擴充套件二層JS下拉列表

■ 自適應解析度可擴充套件二層js下拉列表

序言：

隨著網際網路的普及和網頁製作技術的發展，越來越多的網友開始製作自己的**。做為**最重要的部分—導航選單也出現了各式各樣的設計和製作方法。其中下拉式導航選單已經成為多欄目大資訊量**的首選導航方式。那麼，在下面我將簡單介紹一下眾多下拉列表製作方法中完全使用js自動生成的「自適應解析度可擴充套件二層js下拉列表」的工作原理和使用方法。

1、 s下拉列表原理

下拉列表實際上就是在開始的時候顯示一級或者說是主選單（圖一）。當觸發條件（例如：滑鼠移動到上面時）顯示次級選單（圖二）。

圖一圖二我們現在講的這個「自適應解析度可擴充套件二層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(j=0;j

");}

//--------------- 生成每項下拉列表內容 ------------//

function createsublayer(num)

document.write("");

}document.write("

");

//------------------------------次選單顯隱控制--------------------------//

function layervib(type,num){

var h=type;

var temp=(h='visible'?'hidden':'visible')

for(var i=0;i

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("#","#");//主導航欄目三的次級欄目連線位址

4、附註及擴充。

**中主要使用的函式及方法詳解。

document.write("tmp")頁面中寫入tmp.

var sublayerhttp1=new array();定義乙個新的陣列sublayerhttp1.

for(i=0;i

增強功能。

//--------------- 系統引數*請勿調整 ------------//

var layermax=mainlayer.length+10;

var layername="index"

可以設定layername=其他欄位以生成新的下拉列表。使頁面內共存兩個下拉列表。

自適應解析度可擴充套件二層JS下拉列表

WPF窗體自適應解析度

NGUI UI自適應解析度手遊

Android 多解析度自適應總結

自適應解析度可擴充套件二層JS下拉列表

WPF窗體自適應解析度

NGUI UI自適應解析度 手遊

Android 多解析度自適應總結

相關推薦

NGUI UI自適應解析度手遊