Two examples of jquery menu effects (3) _jquery

The final effect to be achieved is as shown in the figure:

When you click on a menu item, you can collapse and expand it, which is an effect we often see on the Web page. The main application here is the CSS control style and then with jquery implementation.
My feelings: Here, for example, binding to jump to the page, just static binding, not dynamic binding, I used in the development process of dynamic binding is combined with the ASP.net TreeView control implementation. I wonder if there is a better way.
front page code:

<%@ Page language= "C #" autoeventwireup= "true" codefile= "Menu.aspx.cs" inherits= "menu"%> DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

CSS (MENU.CSS)

Ul,li 
{ 
 list-style-type:none; 
 * * If you do not add margin in Sogou browser can not be left-aligned * * * 
 margin:0px;  
 padding:0px 
 } 
. Main 
{ 
 background-image:url ("... /images/title.gif "); 
 Background-repeat:repeat-x; 
 width:100px 
 } 
. Main a 
{ 
 background-image:url ("...) /images/collapsed.gif "); 
 Background-repeat:no-repeat; 
 BACKGROUND-POSITION:3PX Center; 
 Text-decoration:none; 
 Color:white; 
 /* The following is used to ensure that the mouse as long as you stay on the Li can respond, it is equivalent to Li's response area expanded * * * 
 display:block; 
 padding-left:20px; 
 padding-bottom:3px; 
 } 
Li 
{ 
 background-color: #EEEEEE; 
 } 
. Main Li a 
{ 
 color:black; 
 Background-image:none; 
 

Menu.js:

<reference path= "Jquery-1.9.1.min.js"/> 
$ (document). Ready (function () { 
 var main = $ (". Main>a"); 
 Main.click (function () { 
  var Ulnode = $ (this). Next ("ul");  if (ulnode.css ("display") = = "None") 
  {//   ulnode.css ("Display", "block");  } 
  /  else { 
  //   ulnode.css ("Display", "none");  } 
 
  //Shutter effect 
  ulnode.slidetoggle ("normal"); 
 }; 

This example is a continuation of the previous example, and let's take a look at the results we're going to achieve:

This time we want to achieve the following effect, when the mouse slides to the menu item, the submenu display, when the mouse moved away, the menu is closed.
Here, we also solve the problem of sliding doors, that is, when the mouse quickly slide, it will continue to trigger the problem.

The code for the page is as follows:

 <%@ Page language= "C #" autoeventwireup= "true" codefile= "Menu.aspx.cs" inherits= "menu"%> DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

CSS (MENU.CSS)

Ul,li 
{ 
 list-style-type:none; 
 * * If you do not add margin in Sogou browser can not be left-aligned * * * 
 margin:0px;  
 padding:0px 
 } 
. Main,.hmain 
{ 
 background-image:url (".. /images/title.gif "); 
 Background-repeat:repeat-x; 
 width:100px 
 } 
. Main A,.hmain a 
{ 
 background-image:url ("...) /images/collapsed.gif "); 
 Background-repeat:no-repeat; 
 BACKGROUND-POSITION:3PX Center; 
 Text-decoration:none; 
 Color:white; 
 /* The following is used to ensure that the mouse as long as you stay on the Li can respond, it is equivalent to Li's response area expanded * * * 
 display:block; 
 padding-left:20px; 
 padding-bottom:3px; 
 } 
Li 
{ 
 background-color: #EEEEEE; 
 } 
. Main Li A,.hmain li a 
{ 
 color:black; 
 Background-image:none 
 } 
. Main Ul,.hmain ul 
{ 
 display:none; 
 } 
/* Horizontal Menu style 
/* Hmain 
{ 
 float:left; 
 

Menu.js

///<reference path= "Jquery-1.9.1.min.js"/> $ (document). Ready (function () {V 
 AR main = $ (". Main>a"); 
  Main.click (function () {var Ulnode = $ (this). Next ("UL"); 
  if (Ulnode.css ("display") = = "None") {//Ulnode.css ("Display", "block");    
  }/else {//ULNODE.CSS ("Display", "none"); 
 }//Shutter effect ulnode.slidetoggle ("normal"); 
 
 }); Now this variable is used to solve the mouse fast sliding problem clearinterval (Settimeoutid); 
 Nodeli.children ("ul"). Slideup (); 
 var Settimeoutid; 
  $ (". Hmain"). Hover (function () {var Nodeli = $ (this); Settimeoutid = Window.settimeout (function () {Nodeli.children ("ul"). Slidedown ();}, 300)},//The above function is the mouse to enter the operation, the following action is the mouse to move 
  Out of the operation. 
   function () {//At the beginning, I made a mistake here and should redefine the Nodeli var Nodeli = $ (this); 
   Cleartimeout (Settimeoutid); 
   if (Nodeli.children ("ul"). Length!= 0) {nodeli.children ("ul"). Slideup (); 
  }; 
}); }); 

The above two kinds of menu effect, we have no grasp, hope this article can help everyone.