Home >Web Front-end >JS Tutorial >Universal secondary menu code (css javascript)_navigation menu

Universal secondary menu code (css javascript)_navigation menu

WBOYOriginal: 2016-05-16 18:51:032054browse

] But in "CSS Secondary Menu", if the hyperlink in the first-level menu is #, then as long as you click the first-level menu, the second-level menu corresponding to this first-level menu will always be displayed on the web page. It can't be hidden, it's a small bug.
After thinking about it carefully, in fact, no matter what kind of second-level menu, the principle is the same:
1. Each first-level menu will correspond to a layer, and in this layer is placed It is the second-level menu corresponding to the first-level menu.
2. By default, the secondary menu layer is hidden. This can be achieved by setting the display attribute value of the layer to none in CSS.
3. When the mouse is placed on the first-level menu, the corresponding second-level menu layer is displayed. This can be achieved by setting the display attribute value of the layer to block in CSS.
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 first-level menu to the second-level menu, the second-level menu cannot be hidden. Therefore, for the second-level menu, it must also be set to when the mouse is on it. Shows the current layer and hides it when the mouse is moved away.
Okay, now that we have the basic idea, we can start creating the secondary menu.
First, create a layer that contains all first-level menus and second-level menus. The reason why this layer is created is to easily set up the entire menu, for example, to display it in the menu layer, or to display the menu on the right, etc. The
code is as follows:

Copy code The code is as follows:

Then, add a first-level menu in the menu layer. This first-level menu can be a direct hyperlink, or it can be a span or div. Someone may ask, isn't the first-level menu just a hyperlink? It can indeed be said, but you can also apply hyperlinks to spans or divs, and there is another benefit to using spans or divs. This benefit will be discussed later. Here, let’s simply add a few hyperlinks.

Copy code The code is as follows:

The third step is to add a secondary menu layer to the menu layer, as shown below.

Copy code The code is as follows:

Why should the secondary menu layer be placed in the menu layer? Because this makes it easy to set the location of the secondary menu layer.

The fourth step is to use CSS to set the position of the secondary menu layer. Generally, the position attribute of CSS is used to set the position of a layer. Commonly used values for this attribute include relative, absolute, and fixed. Among them, absolute means absolute positioning. When using this method to set the position of a layer, the layer is positioned based on the entire . Therefore, if the size of the browser window changes, the position of the layer will change; fixed means relative. Positioning, and this "relative" refers to the positioning relative to the browser window. Assume that when 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, that is, Always displayed in the browser window. Relative is also relative positioning. This relative positioning is relative to the original position of this layer. In relative mode, the browser will first output the position of the layer, and then offset it relative to 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 relative to its previous position, so no matter how the browser window changes, it will not affect the position of the layer. Since the locations of the secondary menu layers are different, different offsets must be set for each secondary menu layer, as shown below.

Copy code The code is as follows:

In the above code, display in CSS sets the layer to be hidden, postion sets the layer to be offset relative to its original position, left and top set the offset, and width sets the width of the layer. Of course, as long as you want, you can also set other properties, such as font size, etc., which I won’t introduce in detail. Here, it should be noted that the second-level menu layer cannot be too far away from the first-level menu. As introduced before, 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 away from the second-level menu layer, the second-level menu layer will be hidden when the mouse is just moved away from the first-level menu, which defeats the purpose of the second-level menu. Therefore, it must be ensured that when the mouse moves from the first-level menu to the second-level menu layer, the second-level menu layer does not have time to hide. This requires the use of two techniques: 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, so that the mouse moves from the first-level menu to When the secondary menu is on, the secondary menu has no time to hide. Second, place the first-level menu in

or , so that as long as the mouse is on

or , the second-level menu layer will not be hidden, so that it looks first-level The menu and the second-level menu layer seem to be quite far apart, but in fact the second-level menu layer and the first-level menu layer are very similar, and there may even be overlap between the two layers.

The fifth step is to set the onmouseover and onmouseout attributes of the first-level menu and the second-level menu layer, which are used to control the display and hiding of the second-level menu layer. This is mainly to set the display attribute value of the second-level menu layer. I won’t introduce much here. The complete source code is as follows:

<title>Universal secondary menu</title>
    <style 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>

<div id="menu">
<a href="#" onmouseover="showDiv('div1')" onmouseout="hiddenDiv('div1')">
</a>Menu 1<a href="#" onmouseover="showDiv('div2')" onmouseout="hiddenDiv('div2')">
|
</a>Menu 2<a href="#" onmouseover="showDiv('div3')" onmouseout="hiddenDiv('div3')">
|
</a>Menu 3<a href="#" onmouseover="showDiv('div4')" onmouseout="hiddenDiv('div4')">
|
</a>Menu 4<div id="div1" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
<a href="#">
</a>Submenu 1</div>
<div id="div2" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
<a href="#">
</a>Submenu 1<a href="#">
</a>Submenu 2</div>
<div id="div3" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
<a href="#">
</a>Submenu 1<a href="#">
</a>Submenu 2<a href="#">
</a>Submenu three</div>
<div id="div4" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)">
<a href="#">
</a>Submenu 1<a href="#">
</a>Submenu 2<a href="#">
</a>Submenu three<a href="#">
</a>Submenu 4</div>
</div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]
The above code runs normally under IE 7, Opera 9.6, Firefox 3, and Flock 2. Source code download
http://xiazai.jb51.net/200906/yuanma/js_erjicaidan.rar

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Learning example code for javascript DOM objects_javascript skillsNext article：Learning example code for javascript DOM objects_javascript skills

See more

Universal secondary menu code (css javascript)_navigation menu

Related articles