General level-2 menu code (CSS + JavaScript)

Source: Internet
Author: User

] But in CSS level-2 menu, if the hyperlink in the level-1 menu is #, you only need to click the level-1 menu, the level-2 menu corresponding to this level-1 menu will always be displayed on the webpage and cannot be hidden. It is a small bug.
Later I thought about it carefully. In fact, no matter what level-2 menu is, the principle is the same:
1. Each level-1 menu corresponds to a layer, and there is a level-2 menu corresponding to the level-1 menu.
2. By default, the level-2 menu layer is hidden, and the display attribute value of the layer is set to none in CSS.
3. When you place the cursor over the level-1 menu, the corresponding level-2 menu layer is displayed. In CSS, set the display attribute value of the layer to block to achieve this goal.
4. When the mouse moves from the top menu, the corresponding level-2 menu layer is hidden.
5. Of course, if you move the cursor from a level-1 menu to a level-2 menu, the level-2 menu cannot be hidden. Therefore, you must set the level-2 menu, the current layer is displayed when you move the mouse over it. When you move the mouse away, the current layer is hidden.
Now, with the basic idea, we can start to create a level-2 menu.
First, create a layer that contains all level 1 menus and level 2 menus. The reason for creating this layer is to easily set the entire menu, to make the menu display in the menu layer, or to display the menu on the right, and so on,
Code As follows: Copy code The Code is as follows: <Div id = "menu">
</Div>

Then, add a level-1 menu in the menu layer. This level-1 menu can be a direct hyperlink, span, or Div. Someone may ask, isn't a level-1 menu a hyperlink? You can say so, but you can also apply hyperlinks to span or Div, while using SPAN or Div also has a benefit. This benefit will be discussed later. Here, let's simply add several hyperlinks.Copy codeThe Code is as follows: <Div id = "menu">
<A href = "#"> menu 1 </a> |
<A href = "#"> menu 2 </a> |
</Div>

Step 3: add the level-2 menu layer in the menu layer, as shown below.Copy codeThe Code is as follows: <Div id = "menu">
<A href = "#"> menu 1 </a> |
<A href = "#"> menu 2 </a> |
<Div id = "div1">
<A href = "#"> sub-menu 1 </a>
</Div>
<Div id = "div2">
<A href = "#"> sub-menu 1 </a>
<A href = "#"> sub-Menu 2 </a>
</Div>
</Div>

Why should I place the level-2 menu layer in the menu layer? This allows you to easily set the location of the level-2 menu layer.

Step 4: Use CSS to set the position of the level-2 menu layer. The position attribute of CSS is usually used to set the position of a layer. The attribute values are commonly used in relative, absolute, and fixed. Here, absolute is absolute positioning. When you set the layer position in this way, this layer is located based on the entire <body>. Therefore, if the browser window size changes, the layer position will change; fixed is relative positioning, and this "relative" is relative to the browser window positioning, assuming that the layer is 10 pixels away from the top of the browser window, no matter how to drag the scroll bar, this layer will appear 10 pixels away from the top of the browser window, that is, it will always appear in the browser window. Relative is also relative positioning, in which the relative positioning is relative to the original location of this layer. In relative mode, the browser will first output the location of the layer, and then offset the location of the layer, which is why we put the level-2 menu layer in the menu layer. The second-level menu layer can only be offset from the previous position, so how the browser window changes will not affect the location of the layer. Because the location of the level-2 menu layer is different, you need to set different offsets for each level-2 menu layer, as shown below. Copy code The 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 id = "menu">
<A href = "#"> menu 1 </a> |
<A href = "#"> menu 2 </a> |
<Div id = "div1">
<A href = "#"> sub-menu 1 </a>
</Div>
<Div id = "div2">
<A href = "#"> sub-menu 1 </a>
<A href = "#"> sub-Menu 2 </a>
</Div>
</Div>

In the above Code, the display in CSS sets the layer as hidden, the postion sets the layer as offset relative to the original position, the left and top settings, and the width sets the width of the layer. Of course, you can set other attributes, such as the font size, as long as you want. Note that the level-2 menu layer cannot be too far away from the level-1 menu. As mentioned above, the level-2 menu layer cannot be hidden when the mouse moves from the level-1 menu to the level-2 menu. If the level-1 menu is too far away from the level-2 menu layer, the level-2 menu layer is hidden when you move the mouse away from the level-1 menu, which means the level-2 menu cannot be achieved. Therefore, you must ensure that the level-2 menu layer cannot be hidden when you move the cursor from the level-1 menu to the level-2 menu layer. This requires two tips: the first and second level menu layers cannot be too far away from the first level menu. As shown in this example, the top attribute value of the second level menu layer is 0px, in this way, the level-2 menu cannot be hidden when you move the cursor from the level-1 menu to the level-2 menu. Second, place the level-1 menu in <div> or <span>, so that the level-2 menu layer is not hidden as long as the mouse is over <div> or <span>, in this way, it seems that the level-1 menu and level-2 menu layers are quite far away from each other, but the fact that the level-2 menu layer and level-2 menu layer are very similar, it may even overlap between the two layers.

Step 5: Set the onmouseover and onmouseout attributes of the level-1 menu and level-2 menu layer to control the display and hiding of the level-2 menu layer. This mainly sets the display attribute values of the level-2 menu layer. I will not discuss it here. The completeSource codeAs follows:Xmlns = "http://www.w3.org/1999/xhtml">

Menu 1
|
Menu 2
|
Menu 3
|
Menu 4

Sub-menu 1 sub-menu 1
Sub-Menu 2 sub-menu 1
Sub-Menu 2
Sub-menu, three sub-menus, one
Sub-Menu 2
Sub-menu 3
Sub-menu 4
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.