Jquery practice-horizontal and vertical menus

Jquery practice-horizontal and vertical menus

Click the portrait menu to display its sub-menus. When the mouse points to the horizontal menu, its sub-menu is displayed. When the mouse leaves, the sub-menu is hidden.

HTML code:

    
     Horizontal and vertical menus    
 <Script src = "js/JQuery. js"> </script> <script src = "js/menu. js"> </script>    
 
 
        
  
  
Menu item 1 
   
 
    
Menu item 11
 
    
Menu item 12
 
   
 
        
  
  
Menu item 2 
   
 
    
Menu item 21
 
    
Menu item 22
 
   
 
        
  
  
Menu item 3 
   
 
    
Menu item 31
 
    
Menu item 32
 
   
 
    
 
 
    
    
    
     
 
 
        
  
  
Menu item 1 
   
 
    
Menu item 11
 
    
Menu item 12
 
   
 
        
  
  
Menu item 2 
   
 
    
Menu item 21
 
    
Menu item 22
 
   
 
        
  
  
Menu item 3 
   
 
    
Menu item 31
 
    
Menu item 32
 
   
 
    
 
 

CSS code:

Body {} ul, li {/* clear vertices and circles in front of the menu */list-style: none;} ul {padding: 0; margin: 0 ;}. main ,. hmain {background-image: url (.. /images/title.gif); background-repeat: repeat-x; width: 100px;} li {background-color: #999 ;} a {/* cancel all underlines */text-decoration: none; padding-left: 15px; display: block; /* fill the tag with this region * // * For IE6 */display: inline-block; width: 85px; padding-top: 3px; padding-bottom: 3px ;}. main ,. hmain a {color: white; background-image: url (.. /images/collapsed.gif); background-repeat: no-repeat; background-position: 3px center ;}. main li ,. hmain li a {color: black; background-image: none ;}. main ul ,. hmain ul {display: none ;}. hmain {float: left; margin-left: 1px ;}

JQuery code:

$ (Function () {$ (". main> ,. hmain> "). click (function () {// find the sub-menu var ulNode = $ (this) corresponding to the main menu ). next ("ul"); // if (ulNode.css ("display") = "none") {// ulNode.css ("display", "block "); //} else {// ulNode.css ("display", "none"); //} // ulNode. show ("normal"); // slow, fast, 500 // ulNode. hide (); // ulNode. toggle (); // display and hide, automatic judgment // ulNode. slideDown ("slow"); // display // ulNode. slideUp (); // hide ulNode. slideToggle (); changeIcon ($ (this) ;}); $ (". hmain "). hover (function () {$ (this ). children ("ul "). show ("fast"); changeIcon ($ (this ). children ("a");}, function () {$ (this ). children ("ul "). hide ("fast"); changeIcon ($ (this ). children ("a");}); // modify the indicator icon function changeIcon (mainNode) {if (mainNode) of the Main Menu) {if (mainNode.css ("background-image "). indexOf ("collapsed.gif")> = 0) {mainNode.css ("background-image", "url (.. /images/expanded.gif) ");} else {mainNode.css (" background-image "," url (.. /images/collapsed.gif )");}}}

1. HTML summary:

1. Menu items on the page can be expressed by nested ul and li

2. CSS summary:

1. When the list-style attribute is none, the dots in front of ul and li can be cleared.

2. You can use background-repeat to control the repeated filling mode of the background image.

3. When the text-decoration attribute value is none, you can cancel the underline on the text.

4. The value of. display is none, which can be used to hide elements.

3. JQuery summary:

1 .. main a and. the difference between main> a is that the former is used. all the nodes in the class Element of main, and the latter only selects. a node in the child node of main

2. The show and hide methods can be used to display or hide elements. If no parameter is set, the effect is the same as that of modifying the display attribute of CSS. The parameter can be a number in milliseconds, or 'low', 'normal', or 'save' can control the time required for display or hiding.

3. the toggle method is more powerful, saving you the need to determine whether an element is displayed or hidden. It can hide the displayed element and display the hidden element. The parameter usage and show, the hide is the same.