Implement navigation bar pop up floating menu based on JS code

1. Overview

Using pop-up floating menu not only makes the navigation content of the website clearer, but also does not affect the overall effect of the page.Run this example, as shown in Figure 1, when the mouse moves over the title of a first-level navigation menu, the pop-up floating menu displays the corresponding sub-menu of the menu, and when the mouse moves out, the floating menu is hidden.

2. Technical Essentials

This example is mainly in JavaScript, changing dynamically < div > The display attribute value of the style attribute of the label object is used to dynamically display and hide Level 2 navigation menus.In fact, the content of Level 2 menus per Level 1 menu has been added to the web page < div > In the label, it is only set at this time < div > Not shown.So in JavaScript, when the mouse passes through a navigation header, only the specified < div > Object, dynamically modify its display property, the display property contains two attribute values for display and hide, none (hidden) and block (displayed).

For example, there is an id for mydiv on the web page < div > Label, and set this < div > For hiding.In JavaScript, control this < div > The following are shown:

document.getElementById("mydiv").style.display="block"; 

3. Specific implementation

(1) Write the JavaScript method for displaying and hiding, which shows the level 2 menus when the mouse passes through the level 1 menu title, and hides the level 2 menus when the mouse moves out.The key codes are as follows:

function change(img,subMenu,path,type){
img.src="images/"+path+".GIF";
if(subMenu!=null){
if(type==0){
subMenu.style.display="none";
}else{
subMenu.style.display="block";
}
}
} 

(2) in the page, in advance of < div > Label adds the content of Level 2 menu for each Level 1 navigation menu and sets the level 2 menu's < div > Label is hidden.The key codes are as follows:

<div id="NUser" style="background-color:#F3FFD5; border:#75A102 1px solid; width:200px; position:absolute; display:none; left:1px; top: 34px;">
<table width="100%" border="0" height="35px" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="#"> Browse employee information </a>&nbsp;&nbsp;<a href="#"> Add new employees </a></td>
</tr>
</table>
</div>
...// Other omitted here 2 Level menu <div> content  

(3) Table in Level 1 menu < td > Set the onMouseOver and onMouseOut events in, call the change () method of JavaScript defined in step (1) to dynamically change the level 2 menu < div > Show and hide.The key codes are as follows:

<td onMouseOver="change(ImgUser,NUser,'NUser_r',1)" onMouseOut="change(ImgUser,NUser,'NUser_b',0)" style="cursor:hand;">
<img id="ImgUser" src="images/NUser_b.GIF" width="106" height="48" border="0">
...// which is 2 Level menu <div> Code 
</td>