However, in the CSS level two menu, if the hyperlink in the first level menu is #, then just click the Level menu, and the level two menu that corresponds to the menu will always appear in the Web page, not hidden, is a small bug.
Then carefully think about it, in fact, no matter what kind of two-level menu, the principle is the same:
1, each level of the menu will correspond to a layer, and this layer is placed in the level of the menu corresponding to the level two menu.
2, by default, level two menu this layer is hidden, in the CSS Layer display property value set to None, you can achieve this goal.
3, when the mouse on the first level menu, the corresponding level two menu layer display, in the CSS Layer display property value set to block, you can achieve this goal.
4. When the mouse is removed from the first level menu, the corresponding level two menu layer is hidden.
5, of course, if the mouse moved from the first level menu to level two menu, the level two menu can not be hidden, therefore, for the two level menu, it must also be set, when the mouse on its current layer, when the mouse moved away when the current layer hidden.
Well, with the basics, we can start creating level two menus.
First, create a layer that contains all the first-level menus and level two menus. The reason to create this layer is to be able to easily set the entire menu, compared to the menu layer to display, or to the right to display the menu and so on,
The code looks like this:
Copy Code code as follows:
Then, add a Level menu in the menu layer, which can be a direct hyperlink, or span or div. Maybe someone wants to ask, is the level menu not a hyperlink? You can say that, but you can also use a hyperlink on a span or div, and there's a benefit to using span or div, and that's a good thing to do later, and here we'll simply add a few hyperlinks.
Copy Code code as follows:
<div id= "Menu" >
<a href= "#" > Menu One </a> |
<a href= "#" > Menu Two </a> |
</div>
The third step is to add a level two menu layer to the menus layer, as shown below.
Copy Code code as follows:
<div id= "Menu" >
<a href= "#" > Menu One </a> |
<a href= "#" > Menu Two </a> |
<div id= "Div1" >
<a href= "#" > submenu one </a>
</div>
<div id= "Div2" >
<a href= "#" > submenu one </a>
<a href= "#" > submenu two </a>
</div>
</div>
Why should the level two menu layer be placed in the menu layer? Because this makes it easy to set the level two menu layer position.
The fourth step is to use CSS to set the position of Level two menu layer. Usually setting a layer position will use the CSS position attribute, which is commonly used for relative, absolute and fixed three kinds of values. Where absolute is absolutely positioned, the layer is positioned as a whole <body> when the position is set in this way, so the position of the layer changes when the browser window is changed, and the fixed is relative, and this "relative" is positioned relative to the browser window, Assuming that the layer is 10 pixels from the top of the browser window, no matter how the scroll bar is dragged, the layer appears at 10 pixels from the top of the browser window, which is always displayed in the browser window. Relative is also relative positioning, in this relative position is relative to the position of the original location of this layer. In relative mode, the browser will first output the position of the layer, and then offset the position of this layer, which is why we put level two menu layer in the menu layer. Because the level two menu layer once produced, it can only be offset from the previous position, so the browser window changes, it will not affect the position of the layer. Because the level two menu layer is located in a different position, set a different offset for each level two menu layer, as shown below.
Copy Code code as follows:
<style type= "Text/css" >
#div1
{
Display:none;
position:relative;
left:0px;
top:0px;
width:320px;
}
#div2
{
Display:none;
position:relative;
left:50px;
top:0px;
width:320px;
}
</style>
<div id= "Menu" >
<a href= "#" > Menu One </a> |
<a href= "#" > Menu Two </a> |
<div id= "Div1" >
<a href= "#" > submenu one </a>
</div>
<div id= "Div2" >
<a href= "#" > submenu one </a>
<a href= "#" > submenu two </a>
</div>
</div>
In the above code, display in the CSS sets the layer to hidden, postion the layer to the offset from the original position, the left and top sets the offset, and the width to set the thickness of the layer. Of course, as long as you like, you can also set other properties, such as font size, which is not much introduced. Notice here that the level two menu layer cannot be too far away from the level menu. As described earlier, when the mouse moved from the first level menu to level two menu, level two menu layer can not be hidden. If the first level menu is too far from the level two menu, the mouse has just moved away from the first level menu, the level two menu layer has been hidden, which can not reach the goal of level two menu. Therefore, you must ensure that the mouse from the first level menu moved to level two menu layer, the Level two menu layer is too late to hide. This requires the use of two tips: level first to second menu layer can not be too far away from the first level menu, as shown in this example, level two menu layer of the top property value of 0px, so that the mouse from the first menu to move to the level two menu, the level two menu is too late to hide. Second, the first level menu in <div> or <span>, so long as the mouse on <div> or <span>, the level two menu layer will not be hidden, so that looks like a level menu and level two menu layer seems quite distant, But the fact that level two menu layer and first Level menu layer is very close to each other, may even have overlapping between these two layers.
Fifth step, set the first level menu and level two menu layer of onmouseover and onmouseout properties, to control the level two menu layer display and hide, this is to set the Level two menu layer displays the value of the display property. Here is not much introduced, the complete source code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> Universal Level two menu </title> <s Tyle type= "Text/css" > #menu {width:300px; Margin:auto; } #div1 {display:none; font-size:12px; position:relative; left:0px; top:0px; Background-color:white; padding:5px 10px 0px 10px; width:320px; } #div2 {display:none; font-size:12px; position:relative; left:50px; top:0px; Background-color:white; padding:5px 10px 0px 10px; width:320px; } #div3 {display:none; font-size:12px; position:relative; left:120px; top:0px; Background-color:white; padding:5px 10px 0px 10px; width:320px; } #div4 {display:none; font-size:12px; position:relative; left:200px; top:0px; Background-color:white; padding:5px 10px 0px 10px; width:320px; } </style> <script Language= "JavaScript" type= "Text/javascript" >//Display layer function Showdiv (divname) {document.getElementById (divname). style.display = "block"; }//Hidden layer function Hiddendiv (divname) {document.getElementById (divname). Style.display = "None"; } </script> </pead> <body> <div id= "menu" > Menu one | menu two | menu Sam | menu Four <div id= "Div1" onmouseover= "Showdiv (this.id)" onmouseout= "Hiddendiv (this.id)" > submenu one </di v> <div id= "Div2" onmouseover= "Showdiv (this.id)" onmouseout= "Hiddendiv (this.id)" > submenu submenu two </div> ;d IV id= "DIV3" onmouseover= "Showdiv (this.id)" onmouseout= "Hiddendiv (this.id)" > Submenu submenu two Sub-menu three </div> <div Id= "Div4" onmouseover= "Showdiv (this.id)" onmouseout= "Hiddendiv (this.id)" > Submenu submenu submenu Two submenu four </div> </ Div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The above code in IE 7, Opera 9.6, Firefox 3, Flock 2 under normal operation, the source code download
Http://xiazai.jb51.net/200906/yuanma/js_erjicaidan.rar
