JQuery implements a brilliant horizontal drop-down menu _ jquery

In the past, I often saw a menu display on the website, and the drop-down effect will appear when you move the mouse up. The following is an introduction to this page, the following describes the horizontal drop-down menu implemented by JQuery. Previously, the menu display of the website is often seen. The drop-down effect is displayed when you move the cursor up. After watching the JQuery video, it is also easy to implement.

In Html

And
• The tag writes the required elements.
  

  The Code is as follows:

  
  
  

  
  
  • 
    Menu item 1
    
    
    
    • 
      Sub-menu item 11
      
    
    
    • 
      Sub-menu item 12
      
    
    
    
    
  
  
  • 
    Menu item 2
    
    
    
    • 
      Sub-menu item 21
      
    
    
    • 
      Sub-menu item 22
      
    
    
    
    
  
  
  • 
    Menu item 3
    
    
    
    • 
      Sub-menu item 31
      
    
    
    • 
      Sub-menu item 32
      
    
    
    
    
  
  
  
  
  
  
  The most peripheral
  Element
  • That is, menu item 1, menu item 2, and menu item 3. The drop-down menu is under each main menu. If the outermost menu is ul, each main menu is placed in one li, if there is a sub-menu, create a new ul in the li of this main menu, and then nest it in order to build a multi-level menu.
    
    CSS
    

    The Code is as follows:

    
    Ul, li {
    /* Clear the dots On ul and li */
    List-style: none;
    }
    Ul {
    /* Clear the indent value of the sub-menu */
    Padding: 0;
    Margin: 0;
    
    }
    . Hmain {
    Background-image: url (../images/title.gif); // The Front triangle
    Background-repeat: repeat-x;
    Width: 120px;
    }
    Li {
    Background-color: # EEEEEE; // The background image overwrites the background color.
    }
    A {
    // Cancel all underlines
    Text-decoration: none;
    Padding-left: 20px;
    Display: block;/* block set elements can be filled with areas */
    Display: inline-block;
    Width: 100px;
    Padding-top: 3px;
    Padding-bottom: 3px;
    }
    . Hmain {
    Color: white;
    Background-image: url (../images/collapsed.gif );
    Background-repeat: no-repeat;
    Background-position: 3px center;
    }
    . Hmain li {
    Color: black;
    Background-image: none;
    }
    . Hmain ul {
    Display: none;
    }
    . Hmain {
    Float: left;
    Margin-right: 1px;
    }
    
    

    
    The js files jquery. js and menu. js are referenced in Html. menu. js is as follows:
    

    The Code is as follows:

    
    $ (Document). ready (function (){
    // Code executed when the DOM on the page has been loaded
    $ (". Main> a,. hmain a"). click (function (){
    // Find the sub-menu item corresponding to the main menu item
    Var ulNode = $ (this). next ("ul ");
    UlNode. slideToggle ();
    ChangeIcon ($ (this ));
    });
    $ (". Hmain"). hover (function (){
    $ (This). children ("ul"). slideToggle ();
    ChangeIcon ($ (this). children (""));
    }, Function (){
    $ (This). children ("ul"). slideToggle ();
    ChangeIcon ($ (this). children (""));
    });
    });
    /*
    * Modify the indicator icon of the main menu.
    */
    Function changeIcon (mainNode ){
    If (mainNode ){
    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 ')");
    }
    }
    }
    

    
    In this way, the brilliant drop-down menu is complete. The implementation is very simple, but the small knowledge points in it are very fragmented. Example :. main a and. main> a. The former is used. main, this class Element Content all a nodes, the latter only select. a node in the child node of main.
    
    This example has a strong applicability. If you use it on a website to make the interface look more beautiful, you can see three examples. Take the time to continue reading them...