1. Overview
Using a pop-up floating menu can not only make the website's navigation content clearer, but also do not affect the overall effect of the page. Run this example, as shown in Figure 1, when the mouse moves to the title of the first-level navigation menu, the floating menu will pop up to display the submenu corresponding to the menu. When the mouse moves out, the floating menu will be hidden.
2. Technical points
This example is mainly in JavaScript, dynamically changing the display attribute value of the style attribute of the <div> tag object to dynamically display and hide the secondary navigation menu. In fact, the content of the secondary menu under each level one menu has been added to the <div> tag of the web page, but the <div> is set at this time and will not be displayed. Therefore, in JavaScript, when the mouse passes through a navigation title, it only needs to call the specified <div> object and dynamically modify its display attribute. The display attribute contains two attribute values for display and hidden, namely none (hidden) and block (display).
For example: There is a <div> tag with id of mydiv in the web page, and this <div> is set to hide. In JavaScript, the writing method to control the display of this <div> is as follows:
document.getElementById("mydiv").style.display="block";3. Specific implementation
(1) Write JavaScript methods for display and hide. The secondary menu will be displayed when the mouse passes through the primary menu title, and the secondary menu will be hidden when the mouse moves out. The key code is 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, add the content of the secondary menu to each primary navigation menu in the <div> tag in advance, and set the <div> tag of the secondary menu to hide. The key code is as follows:
<div id="NUser" style="background-color:#F3FFD5; border:#75A102 1px solid; width:200px; position:absolute; display:none; left:1px; top: 34px;"><table cellpacing="0" cellpadding="0"><tr><td align="center"><a href="#">Browse employee information</a><a href="#">Add new employees</a></td></tr></table></div>...//The content of other secondary menus is omitted here
(3) Set onMouseOver and onMouseOut events in the <td> of the table of the primary menu, call the JavaScript change() method defined in step (1), and dynamically change the display and hiding of the secondary menu <div>. The key code is 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">...//The <div>code of the secondary menu is omitted</td>
The above is the pop-up floating menu of the navigation bar introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!