]But in "CSS Level 2 Menu", if the hyperlink in the Level 1 menu is #, then as long as you click the Level 1 menu, the second menu corresponding to this Level 1 menu will always be displayed on the web page and cannot be hidden, which is a small bug.
Later, I thought about it carefully and found that the principle is the same no matter what kind of secondary menu it is:
1. Each first-level menu will correspond to a layer, and the second-level menu corresponding to the first-level menu is placed in this layer.
2. By default, the layer of the secondary menu is hidden. Setting the display property value of the layer to none in CSS can achieve this goal.
3. When the mouse is placed on the first-level menu, the corresponding second-level menu layer is displayed, and the display attribute value of the layer is set to block in CSS, which can achieve this goal.
4. When the mouse is moved away from the first-level menu, the corresponding second-level menu layer is hidden.
5. Of course, if the mouse moves from the primary menu to the secondary menu, the secondary menu cannot be hidden either. Therefore, for the secondary menu, it must also be set to display the current layer when the mouse is on it, and hide the current layer when the mouse is moved away.
Okay, after we have the basic idea, we can start creating a secondary menu.
First, create a layer that contains all the primary and secondary menus. The reason for creating this layer is to facilitate setting up the entire menu, letting the menu be displayed in the menu layer, or letting the menu be displayed on the right, etc.
The code looks like this:
<div >
</div>
Then, add a first-level menu in the menu layer. This first-level menu can be a direct hyperlink or a span or a div. Maybe someone wants to ask, isn’t the first-level menu just a hyperlink? It can be said that, but you can also use hyperlinks on span or div. There is another advantage to using span or div. This benefit will be discussed later. Here, let’s just add a few hyperlinks.
<div >
<a href="#">Men 1</a> |
<a href="#">Men 2</a> |
</div>
The third step is to add a secondary menu layer to the menu layer, as shown below.
<div >
<a href="#">Men 1</a> |
<a href="#">Men 2</a> |
<div >
<a href="#">Submenu One</a>
</div>
<div >
<a href="#">Submenu One</a>
<a href="#">Submenu 2</a>
</div>
</div>
Why put the secondary menu layer in the menu layer? Because doing this can easily set the position of the secondary menu layer.
Step 4: Use CSS to set the position of the secondary menu layer. Usually, when setting a layer position, the CSS position attribute will be used. This property value is commonly used in three types: relative, absolute and fixed. where absolute is absolute positioning. When setting the position of the layer in this way, the layer is positioned based on the entire <body>. Therefore, if the size of the browser window changes, the position of the layer will change; fixed is relative positioning, and this "relative" is relative positioning relative to the browser window. Assuming that the layer is 10 pixels away from the top of the browser window, no matter how you drag the scroll bar, this layer will appear 10 pixels away from the top of the browser window, which will always be displayed in the browser window. relative is also relative positioning, and this relative positioning is positioning relative to the original position of this layer. In relative mode, the browser will first output the position of the layer and then offset the position of this layer. This is why we place the secondary menu layer in the menu layer. Because once the secondary menu layer is generated, it can only be offset from its previous position, no matter how the browser window changes, it will not affect the position of the layer. Since the secondary menu layer is located in different locations, different offsets should be set for each secondary menu layer, as shown below.
<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 >
<a href="#">Men 1</a> |
<a href="#">Men 2</a> |
<div >
<a href="#">Submenu One</a>
</div>
<div >
<a href="#">Submenu One</a>
<a href="#">Submenu 2</a>
</div>
</div>
In the above code, the display in CSS sets the layer to hide, the position sets the layer to offset relative to the original position, the left and top sets the offset, and the width sets the layer width. Of course, you can set other attributes, such as font size, as long as you like, so I won’t introduce it much. Here, it should be noted that the second-level menu layer cannot be too far from the first-level menu. As mentioned earlier, when the mouse moves from the first-level menu to the second-level menu, the second-level menu layer cannot be hidden. If the first-level menu is too far from the second-level menu layer, the second-level menu layer is already hidden when the mouse is just removed from the first-level menu, which will not achieve the purpose of the second-level menu. Therefore, it is necessary to ensure that the second-level menu layer does not have time to hide when the mouse moves from the first-level menu to the second-level menu layer. This requires two techniques: the first and second-level menu layers cannot be too far from the first-level menu. As shown in this example, the top attribute value of the second-level menu layer is 0px, so when the mouse moves from the first-level menu to the second-level menu, the second-level menu cannot be hidden. Second, place the first-level menu in <div> or <span>, so that the second-level menu layer will not be hidden as long as the mouse is on <div> or <span>. This seems that the first-level menu and the second-level menu layer seem to be quite far away, but in fact, the second-level menu layer and the first-level menu layer are very similar, and it is even possible that the two layers overlap.
Step 5: Set the onmouseover and onmouseout properties of the first-level menu and the second-level menu layer to control the display and hiding of the second-level menu layer. This mainly sets the display attribute value of the second-level menu layer. I won't introduce it here, the complete source code is as follows:
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
The above code runs normally under IE 7, Opera 9.6, Firefox 3, and Flock 2. Source code download
http://xiazai./200906/yuanma/js_erjicaidan.rar
Later, I thought about it carefully and found that the principle is the same no matter what kind of secondary menu it is:
1. Each first-level menu will correspond to a layer, and the second-level menu corresponding to the first-level menu is placed in this layer.
2. By default, the layer of the secondary menu is hidden. Setting the display property value of the layer to none in CSS can achieve this goal.
3. When the mouse is placed on the first-level menu, the corresponding second-level menu layer is displayed, and the display attribute value of the layer is set to block in CSS, which can achieve this goal.
4. When the mouse is moved away from the first-level menu, the corresponding second-level menu layer is hidden.
5. Of course, if the mouse moves from the primary menu to the secondary menu, the secondary menu cannot be hidden either. Therefore, for the secondary menu, it must also be set to display the current layer when the mouse is on it, and hide the current layer when the mouse is moved away.
Okay, after we have the basic idea, we can start creating a secondary menu.
First, create a layer that contains all the primary and secondary menus. The reason for creating this layer is to facilitate setting up the entire menu, letting the menu be displayed in the menu layer, or letting the menu be displayed on the right, etc.
The code looks like this:
Copy the codeThe code is as follows:
<div >
</div>
Then, add a first-level menu in the menu layer. This first-level menu can be a direct hyperlink or a span or a div. Maybe someone wants to ask, isn’t the first-level menu just a hyperlink? It can be said that, but you can also use hyperlinks on span or div. There is another advantage to using span or div. This benefit will be discussed later. Here, let’s just add a few hyperlinks.
Copy the codeThe code is as follows:
<div >
<a href="#">Men 1</a> |
<a href="#">Men 2</a> |
</div>
The third step is to add a secondary menu layer to the menu layer, as shown below.
Copy the codeThe code is as follows:
<div >
<a href="#">Men 1</a> |
<a href="#">Men 2</a> |
<div >
<a href="#">Submenu One</a>
</div>
<div >
<a href="#">Submenu One</a>
<a href="#">Submenu 2</a>
</div>
</div>
Why put the secondary menu layer in the menu layer? Because doing this can easily set the position of the secondary menu layer.
Step 4: Use CSS to set the position of the secondary menu layer. Usually, when setting a layer position, the CSS position attribute will be used. This property value is commonly used in three types: relative, absolute and fixed. where absolute is absolute positioning. When setting the position of the layer in this way, the layer is positioned based on the entire <body>. Therefore, if the size of the browser window changes, the position of the layer will change; fixed is relative positioning, and this "relative" is relative positioning relative to the browser window. Assuming that the layer is 10 pixels away from the top of the browser window, no matter how you drag the scroll bar, this layer will appear 10 pixels away from the top of the browser window, which will always be displayed in the browser window. relative is also relative positioning, and this relative positioning is positioning relative to the original position of this layer. In relative mode, the browser will first output the position of the layer and then offset the position of this layer. This is why we place the secondary menu layer in the menu layer. Because once the secondary menu layer is generated, it can only be offset from its previous position, no matter how the browser window changes, it will not affect the position of the layer. Since the secondary menu layer is located in different locations, different offsets should be set for each secondary menu layer, as shown below.
Copy the codeThe code is 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 >
<a href="#">Men 1</a> |
<a href="#">Men 2</a> |
<div >
<a href="#">Submenu One</a>
</div>
<div >
<a href="#">Submenu One</a>
<a href="#">Submenu 2</a>
</div>
</div>
In the above code, the display in CSS sets the layer to hide, the position sets the layer to offset relative to the original position, the left and top sets the offset, and the width sets the layer width. Of course, you can set other attributes, such as font size, as long as you like, so I won’t introduce it much. Here, it should be noted that the second-level menu layer cannot be too far from the first-level menu. As mentioned earlier, when the mouse moves from the first-level menu to the second-level menu, the second-level menu layer cannot be hidden. If the first-level menu is too far from the second-level menu layer, the second-level menu layer is already hidden when the mouse is just removed from the first-level menu, which will not achieve the purpose of the second-level menu. Therefore, it is necessary to ensure that the second-level menu layer does not have time to hide when the mouse moves from the first-level menu to the second-level menu layer. This requires two techniques: the first and second-level menu layers cannot be too far from the first-level menu. As shown in this example, the top attribute value of the second-level menu layer is 0px, so when the mouse moves from the first-level menu to the second-level menu, the second-level menu cannot be hidden. Second, place the first-level menu in <div> or <span>, so that the second-level menu layer will not be hidden as long as the mouse is on <div> or <span>. This seems that the first-level menu and the second-level menu layer seem to be quite far away, but in fact, the second-level menu layer and the first-level menu layer are very similar, and it is even possible that the two layers overlap.
Step 5: Set the onmouseover and onmouseout properties of the first-level menu and the second-level menu layer to control the display and hiding of the second-level menu layer. This mainly sets the display attribute value of the second-level menu layer. I won't introduce it here, the complete source code is as follows:
[Ctrl+A Select all Note:Introducing external Js requires refreshing the page before execution]
The above code runs normally under IE 7, Opera 9.6, Firefox 3, and Flock 2. Source code download
http://xiazai./200906/yuanma/js_erjicaidan.rar