[JS Code] adaptive resolution scalable L2 JS drop-down menu

Http://www.pconline.com.cn/pcedu/sj/wz/other/0308/210199.html
)

■ Adaptive resolution scalable two-layer JS drop-down menu

Preface:

With the popularization of the Internet and the development of the web page production technology, more and more netizens began to make their own websites. As the most important part of the website, navigation menus also show a variety of design and production methods. The drop-down menu has become the preferred navigation method for websites with multiple columns and large amounts of information. Then, I will briefly introduce the working principle and usage of the "Adaptive resolution extensible Layer 2 JS drop-down menu" automatically generated by JS in many drop-down menu creation methods.

 

1. S drop-down menu Principle

 

In fact, the drop-down menu displays a level or main menu at the beginning (figure 1 ). When the trigger condition (for example, move the mouse over) is displayed, the secondary menu is displayed (figure 2 ).

 

 

Figure 1

 

 

Figure 2

 

So how can this effect be achieved. It is actually very simple. All drop-down menus are implemented through the explicit and hidden layers. When downloading files, both the main menu and secondary menu are formed or downloaded to the client, that is, your machine. The secondary menu is hidden. The hiding method is generally to use javascript with css to control the attribute visibility of the sub-menu to hide. Therefore, you cannot see the secondary menu at the beginning. When the trigger condition is met (for example, move the mouse over), use javascript to control the submenu display. When the next trigger condition is met (for example, move the mouse away), control the hidden sub-menu.

 

The "Adaptive resolution extensible two-layer JS drop-down menu" we are talking about now can automatically adapt to changes in browser resolution and always maintain a relative position. You can easily customize the menu to display the content and connection page. You can expand the number of main navigation and secondary navigation columns at will. You can freely change the style and appearance of the connected and navigation tables.

 

2. JS Code details in the "Adaptive resolution extensible Layer 2 js drop-down menu"

 

// --------------- Main navigation bar content ------------//
Var mainLayer = new Array ("blue ideal", "intentional creation"); // main navigation Column

 

// --------------- Content of the secondary navigation bar ------------//
Var subLayer0 = new Array ("Forum", "document"); // subtopic next to the navigation bar
Var subLayerHttp0 = new Array ("#", "#"); // The Connection address of the subtopic under the main navigation bar
Var subLayer1 = new Array ("Forum", "document"); // subtopic of navigation column 2
Var subLayerHttp1 = new Array ("#", "#"); // The Connection address of the subtopic in main navigation column 2

// --------------- Adjust the Table parameters of the main navigation bar ------------//
Var mainTableTdWidth = 100; // adjust the width of each TD to adjust the content spacing of the main navigation bar
Var mainTableBorder = 0; // adjust the Border width of the main navigation table
Var mainTableCellspacing = 0; // adjust the main navigation table Cellspacing
Var mainTableCellpadding = 1; // adjust the main navigation table Cellpadding
Var mainTableBgcolor = "#000000"; // adjust the background color of the main navigation table
Var mainTableBordercolor = ""; // adjust the color of the main navigation table editing box.
Var mainTableBackgroundImg = ""; // adjust the url of the background image of the main navigation table
Var hrefClassName = "link" // adjust the url Style
Var mainTableTdBgcolor = "B2CBCF"; // adjust the Td color of the main navigation table.

// --------------- Adjust the parameters of the secondary navigation bar Table ------------//
Var subTableBorder = 0; // adjust the Border width of the subnavigation bar table
Var subTableCellspacing = 0; // adjust the subnavigation bar table Cellspacing
Var subTableCellpadding = 1; // adjust the next navigation bar table Cellpadding
Var subTableBgcolor = "#000000"; // adjust the background color of the secondary navigation bar table
Var subTableBordercolor = ""; // the color of the widget in the navigation bar.
Var subTableBackgroundImg = ""; // url of the background image of the navigation bar table
Var subTableTdBgcolor = "B2CBCF"; // adjust the Td color of the secondary navigation table.
Var sbuTabbleTop = 21; // fine-tune up and down the navigation table
Var sbuTabbleLeft =-1; // click the left or right corner of the navigation table

 

// --------------- System parameter * do not adjust ------------//
Var layerMax = mainLayer. length + 10;
Var layerName = "index ";

 

// --------------- Generate the drop-down menu ------------//
Function createMainLayer (){
Document. write ("<table border = 0 cellspacing = 0 cellpadding = 0> <tr> <td> <div id = 'wall' onmouseout = layervib ('visable ', '"+ layerMax +"') style = 'position: relative; left: 0px; top: 0px; width: 100%; z-index: 1'> <table width = "+ mainLayer. length * mainTableTdWidth + "border = '" + mainTableBorder + "'cellspacing ='" + mainTableCellpadding + "'cellpadding = '" + mainTableCellpadding + "'bgcolor =" + mainTableBgcolor +" 'bordercolor = '"+ mainTableBordercolor +" 'background =' "+ mainTableBackgroundImg +" '> <tr> ");
For (I = 0; I <mainLayer. length; I ++ ){
Document. write ("<td width = '" + mainTableTdWidth + "'bgcolor ='" + mainTableTdBgcolor + "'class = '" + hrefClassName + "'onmouseover = layervib ('visable ', '"+ I +"')> & nbsp; <a href = '#'> "+ mainLayer [I] +" </a> </td> ");
}
Document. write ("</tr> </table> ");

For (j = 0; j <mainLayer. length; j ++ ){
CreateSubLayer (j );
}
Document. Write ("</div> </table> </TD> </tr> </table> ");
}

 

// --------------- Generate the content of each drop-down menu ------------//
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 ("<Div id = '" + sublayername + "'style = 'position: absolute; left:" + (sublayerleft + sbutabbleleft) + "PX; top: "+ (maintableborder + maintablecellspacing + maintablecellpadding) * 2 + sbutabbletop) +" PX; Z-index: 2; Height: 24px; visibility: hidden 'onmouseover = layervib ('visable', '"+ num +"') onmouseout = layervib ('visable', '"+ layermax +"')> ");
If (sublayerlist. length! = 0 ){
Document. write ("<table width = '100px 'border = '" + subTableBorder + "'cellspacing ='" + subTableCellpadding + "'cellpadding = '" + subTableCellpadding + "'bgcolor =' "+ subTableBgcolor +" 'bordercolor = '"+ subTableBordercolor +" 'background =' "+ subTableBackgroundImg + "'")
For (h = 0; h <subLayerList. length; h ++ ){

Document. write ("<tr> <td bgcolor = '" + subTableTdBgcolor + "'width = '000000' class = 'link'> & nbsp; <a href = '"+ subLayerHttpList [h] +" 'class = 'link'> "+ subLayerList [h] +" </a> & nbsp; </td> </tr> ");
}
Document. write ("</table> ");
}
Document. write ("</div> ");

}

 

// -------------------------------- Hide control of the sub-menu --------------------------//
Function layervib (type, num ){
Var H = type;
Var temp = (H = 'visible '? 'Hided': 'visable ')
For (VAR I = 0; I <mainlayer. length; I ++ ){
VaR E = eval ('document. All. Index' + I + '. style ');
VaR H = eval (I );
If (I = num) {e. Visibility = type} else {e. Visibility = temp };
}
}

 

3. How to Use js code in the "Adaptive resolution extensible two-layer JS drop-down menu.

 

(1) store the above Code as js_daohang.js. in the same directory as the called page.
(2) Add <script language = JavaScript src = js_daohang.js>

 

<HTML>
<Head>
<Title> Ping An securities counter system... </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<LINK rel = "stylesheet" href = "text.css" type = "text/CSS">
<Script language = JavaScript src = js_daohang.js>
</Head>

(3) Use

<Script language = JavaScript>
Createmainlayer ();
</SCRIPT>

To generate a menu. For example. You can place it anywhere on the page.

 

 

<Table width = "100%" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<TD width = "300"> & nbsp; </TD>
& Lt; TD width = "71%" align = "center" & gt;
<Script language = JavaScript>
Createmainlayer ();
</SCRIPT>
</TD>
</Tr>
</Table>

(4) how to add new main menus and sub-menu columns.

Suppose we want to add a new "Seven birds" topic in the existing topic. Below are two subtopics: "Forum" and "document. First, add "Seven birds" in the following part of the code ".

 

VaR mainlayer = new array ("blue ideal", "Creative creation", "colorful bird"); // main navigation Column
0 1 2

 

Add the "Forum" and "document" topics and connection addresses in the following locations.

 

Var subLayer0 = new Array ("Forum", "document"); // subtopic next to the navigation bar
Var subLayerHttp0 = new Array ("#", "#"); // The Connection address of the subtopic under the main navigation bar
Var subLayer1 = new Array ("Forum", "document"); // subtopic of navigation column 2
Var subLayerHttp1 = new Array ("#", "#"); // The Connection address of the subtopic in main navigation column 2
Var subLayer2 = new Array ("Forum", "document"); // subtopic of navigation column 3
Var subLayerHttp2 = new Array ("#", "#"); // The Connection address of the subtopic in main navigation column 3

 

Note: the blue part is the part to be added. The red part is the part to be modified. It must correspond to the above numbers one by one. (5) For details about other adjustments, see the code details section.

 

4. Notes and extensions.

 

The main functions and methods used in the Code are described in detail.

On the Document. write ("tmp") page, write tmp.
Var subLayerHttp1 = new Array (); defines a new Array subLayerHttp1.
For (I = 0; I <tmp; I ++) {statement} is set to I = 0. When the value of I is less than the value of tmp, execute the statement, at the same time, the value of I is added to 1.
Var temp = (H = value 1? Value 2: Value 3) when the value of H is equal to value 1, temp is equal to value 2. Otherwise, the temp value is 3.

 

Enhancements.
// --------------- System parameter * do not adjust ------------//
Var layerMax = mainLayer. length + 10;
Var layerName = "index"

 

You can set layerName = to another field to generate a new drop-down menu. So that two drop-down menus exist on the page.