JS implements display and hiding of drop-down menu

In the previous article, we introduced to you the code for JS to implement the drop-down menu, so the drop-down menu has display and hiding. Today we will introduce to you the JS implementation of the display and hiding of the drop-down menu!

In this article, we will use JavaScript script to display and hide the drop-down menu. The knowledge we need to use JavaScript methods to implement are:

1) JS events: onmouseover mouse passing event and onmouseout mouse leaving event.
2) JS basic syntax: Use the function keyword to define functions.
3)DOM programming: getElementsByTagName() method.
Then the next step is our production process:
1) Hide the secondary menu: Set the CSS style to hide the secondary menu.
2) Write the showsub() function to display the submenu: use getElementsByTagName to obtain the secondary menu items; set the secondary menu display through style.display.
3) Write the hidesub() function: use getElementsByTagName to obtain the secondary menu items; set the secondary menu to be hidden through style.display.
4) Add mouse events: Add mouse events to the first-level menu with a second-level menu, and call the showsub()/hidesub() function to realize the display and hiding of the second-level menu when the mouse passes through the first-level menu.
5) Do browser compatibility testing, at least five browsers. IE7,8,9, Firefox, Google, 2345 browser, etc.

Rendering:

HTML code:

         
  
 
 
网站首页
 
课程大厅 
 
JavaScript
 
jQuery
 
Ajax
 
 
 
学习中心 
 
视频学习
 
案例学习
 
交流平台
 
 
 
经典案例
 
关于我们
 
 
   

External CSS style sheet style.css file code:

/*CSS全局设置*/ *{ margin:0; padding:0; } .nav{ background-color:#EEEEEE; height:40px; width:450px; margin:0 auto; } ul{ list-style:none; } ul li{ float:left; line-height:40px; text-align:center; } a{ text-decoration:none; color:#000000; display:block; width:90px; height:40px; } a:hover{ background-color:#666666; color:#FFFFFF; } ul li ul li{ float:none; background-color:#EEEEEE; } ul li ul{ display:none; } /*为了兼容IE7设置的CSS样式，但是又必须写在a:hover前面*/ ul li ul li a:link,ul li ul li a:visited{ background-color:#EEEEEE; } ul li ul li a:hover{ background-color:#009933; } 

External JS script script.js file code:

function showsub(li){ var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="block"; } function hidesub(li){ var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="none"; }

Summary:

Related recommendations:

Example of JavaScript implementation of drop-down menu

How to use JavaScript to create a dynamic drop-down menu effect

The above is the detailed content of JS implements display and hiding of drop-down menu. For more information, please follow other related articles on the PHP Chinese website!