Full introduction to the drop-down menu: Javascript _ Javascript tutorial

Drop-down menu, drop-down menu full guide, Javascript: drop-down menu full guide Javascript, Javascript tutorial

■ 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

The drop-down menu is actually a level or main menu () displayed at the beginning (). When the trigger condition (for example, move the mouse over) is displayed, the secondary menu () is displayed ().

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 ("

Document. write (" ");For (I = 0; I ");}Document. write (" "+ MainLayer [I] +" "); For (j = 0; j CreateSubLayer (j ); } Document. write ("

");
}

// --------------- 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 ("");
If (subLayerList. length! = 0 ){
Document. write ("

Document. write ("

For (h = 0; h ");}Document. write ("

"+ SubLayerList [h] +"

");
}
Document. write ("");

}

 

// -------------------------------- Hide control of the sub-menu --------------------------//
Function layervib (type, num ){
Var H = type;
Var temp = (H = 'visible '? 'Hided': 'visable ')
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 };
}
}

[Quick Start-CorelDRAW and advanced instances] [Quick Start-Flash MX 2004 and advanced instances]

[1] [2] Next page