Adaptive resolution can be extended two-layer JS drop-down menu (Turn)

Adaptive resolution can be extended two-layer JS pull-down menu
The pig with black eye rim

Preface:

With the popularization of the Internet and the development of web-making technology, more and more netizens began to make their own websites. As the most important part of the site-navigation menu also appears a variety of design and production methods. The Pull-down navigation menu has become the preferred navigation method for many columns of large information sites. Then, I will briefly introduce a number of Drop-down menu production methods in the full use of JS automatically generated "Adaptive resolution scalable two-layer JS drop-down Menu" Work principle and use method.

1, S Drop-down menu principle

The drop down menu actually shows the first level or the main menu at the beginning (figure I). Displays the secondary menu when the trigger condition (for example, the mouse is moved above) is displayed (Figure II).

Figure I

Figure II

So how to achieve this effect. It's actually very simple. All Pull-down menus are implemented through the explicit implicit of the layer. In the file download, in fact, the main menu and subordinate menus are formed or downloaded to the client is your machine. Only the secondary menu is hidden. The hidden method is generally to use JavaScript with CSS to control the properties of the layers of the subordinate menu visibility to hide
。 So in the beginning of the use you can't see the subordinate menu. When the trigger condition is met (for example, the mouse is moved above), JavaScript is used to control the secondary menu display. Controls the secondary menu to hide when the trigger condition is met (for example, the mouse is moved away).

We now talk about this "adaptive resolution scalable two-layer JS pull-down menu" can automatically adapt to browser resolution changes always remain relative position. can be convenient to customize their own menu display content and Connection page. Can expand the main navigation and secondary navigation of the number of columns. You can freely change the style and appearance of the connection and navigation tables, and so on.

2, "Adaptive resolution can be extended two-layer JS drop-down Menu" JS code detailed

---------------main navigation------------//
var mainlayer=new Array ("Blue ideal", "move to create");/main navigation column

---------------navigation bar content------------//
var sublayer0=new Array ("forum", "literature"); The secondary section of the navigation column
var sublayerhttp0=new Array ("#", "#");//The secondary column connection address of the main navigation column
var sublayer1=new Array ("forum", "Literature");//secondary column of navigation column two
var sublayerhttp1=new Array ("#", "#");//Secondary column connection address of main navigation column II

---------------main navigation bar table parameter adjustment------------//
var maintabletdwidth=100; Width of each TD, adjust the space between the main navigation content
var maintableborder=0; Adjust the border width of the dominant navigation table
var maintablecellspacing=0; Adjust the main navigation form cellspacing
var maintablecellpadding=1; Adjust the main navigation form cellpadding
var maintablebgcolor= "#000000"; Adjust the background color of the dominant navigation table
var maintablebordercolor= ""; Adjust the main navigation table frame color
var maintablebackgroundimg= ""; Adjust the main navigation table background picture URL address
var hrefclassname= "link"//adjust URL style style
var maintabletdbgcolor= "B2CBCF"; Adjust the main navigation form TD color

---------------Time navigation bar table parameter adjustment------------//
var subtableborder=0; Resize a secondary navigation bar table border width
var subtablecellspacing=0; Adjust the secondary navigation bar table cellspacing
var subtablecellpadding=1; Adjust the secondary navigation bar table cellpadding
var subtablebgcolor= "#000000"; Resize a secondary navigation bar table background color
var subtablebordercolor= ""; Secondary navigation bar Table frame Color
var subtablebackgroundimg= ""; Secondary navigation bar table background picture URL address
var subtabletdbgcolor= "B2CBCF"; Adjust the secondary navigation table TD color
var sbutabbletop=21; Secondary navigation table up and down fine tuning
var sbutabbleleft=-1; Secondary navigation table left and right fine-tuning

---------------System Parameters * Do not adjust------------//
var layermax=mainlayer.length+10;
var layername= "index";

---------------Generate a Drop-down menu------------//
function Createmainlayer () {
document.write ("<table border=0 cellspacing=0 cellpadding=0><tr><td><div id= ' wall ' onmouseout=") Layervib (' Visible ', ' "+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 (' Visible ', ' +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 each Drop-down menu content------------//
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 (' visible ', ' +num+ ') onmouseout=layervib (' Visible ', ' "+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= ' 100% ' class= ' link ' >&nbsp;<a ' href = ' "+ sublayerhttplist [h]+" ' class= ' link ' > "+sublayerlist[h]+" </a>&nbsp;</td></tr> ");
}
document.write ("</table>");
}
document.write ("</div>");

}

-------------------------------time Menu Implicit control--------------------------//
function Layervib (type,num) {
var H=type;
var temp= (h= ' visible '? Hidden ': ' Visible ')
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, "Adaptive resolution can be extended two-layer JS drop-down menu" JS Code use method.

(1) Store the above code as js_daohang.js. Placed in the same directory as the calling page.
(2) Add the <script language=javascript in the desired foliage in the following locations src=js_daohang.js>

<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>
(3) where you want to display the Drop-down menu
<script language=javascript>
Createmainlayer ();
</script>
To produce the menu. The following example. Can be placed anywhere on the page.

<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<TD width= ">&nbsp;</td>"
<TD width= "71%" align= "Center" >
<script language=javascript>
Createmainlayer ();
</script>
</td>
</tr>
</table>
(4), how to add a new main menu and subordinate menu columns.
Let's say we want to add a new "seven-color Bird" column to the existing columns. Below are "forum" and "literature" two secondary columns. So I'm going to first add the "seven-color bird" in the following section of the code.

var mainlayer=new Array ("Blue ideal", "Dynamic Building", "seven-color Bird");/main navigation column
0 1 2

Then add "forum" and "Literature" columns and connection addresses in the following locations.

var sublayer0=new Array ("forum", "literature"); The secondary section of the navigation column
var sublayerhttp0=new Array ("#", "#");//The secondary column connection address of the main navigation column
var sublayer1=new Array ("forum", "Literature");//secondary column of navigation column two
var sublayerhttp1=new Array ("#", "#");//Secondary column connection address of main navigation column II
var sublayer2=new Array ("forum", "Literature");//Sub section of navigation column three
var sublayerhttp2=new Array ("#", "#");//Sub-column connection address of main navigation column three

Note: The blue section is the part that needs to be added. The red section is the part you want to modify. To correspond to the number one by one above. (5), other details of the adjustment please refer to the Code detailed section.

4, Notes and expansion.

The main functions and methods used in the code are detailed.
document.write ("tmp") writes TMP to the page.
var sublayerhttp1=new array (); Defines a new array subLayerHttp1.
The for (i=0;i<tmp;i++) {statement} sets I=0 and executes the statement when the value of I is less than the value of TMP, while the value of I is plus 1.
var temp= (h= value 1-value 2: value 3) temp equals value 2 when H's value equals value 1. Conversely, the value of temp equals value 3.

Enhanced functionality.
---------------System Parameters * Do not adjust------------//
var layermax=mainlayer.length+10;
var layername= "Index"

You can set layername= other fields to generate a new Drop-down menu. Make the page coexist with two drop-down menus.

Please contact me if you have any questions. Jiangyf@paic.com.cn

Complete the full text.