JQuery implements gorgeous horizontal drop-down menu_jquery

In the past, I often saw menus displayed on websites. When the mouse is moved up, a drop-down effect will appear. It is very gorgeous. After watching the JQuery video, I found that it is quite easy to implement.

In Html, write the required elements through the

and
• tags.
  
  Copy code The code is as follows:
  
  
  

  
  
  • 
    Menu item 1
    
    
    
    • 
      < ;a href="#"> Submenu item 11
      
    
    
    • 
      Submenu item 12
      
    
    
    
    
  
  
  • 
    Menu item 2
    
    
    
    • 
      Submenu item 21
      
      
    • 
      Submenu item 22
      
    
    
    
    
  
  
  • 
    Menu item 3
    
    
    
    Submenu item 31
    
  
  
  • 
    
    
  
  

  
  
  
  
  
  
  The outermost
  element
  • is menu item 1, menu item 2, and menu item 3. The drop-down menus are under each main menu respectively. If the outermost menu For ul, each main menu of one layer is placed in a li. If there is a submenu, create a new ul in the li of this main menu, and then nest it in sequence to build a multi-layered menu.
    
    CSS
    
    Copy code The code is as follows:
    
    ul,li{
    /*Clear the dots on ul and li*/
    list-style:none;
    }
    ul{
    /*Clear the indent value of the submenu*/
    padding:0;
    margin:0;
    
    }
    .hmain{
    background-image:url(../images/title.gif); //The small triangle in front
    background-repeat:repeat-x;
    width:120px;
    }
    li{
    background-color:#EEEEEE; //Background image covers the background color
    }
    a{
    //Cancel all underlines
    text-decoration:none;
    padding-left:20px;
    display:block; /*Block set elements can fill the area*/
    display:inline-block;
    width:100px;
    padding-top:3px;
    padding-bottom:3px;
    }
    .hmain a{
    color:white;
    background-image:url(../images/collapsed.gif);
    background-repeat:no-repeat;
    background-position:3px center;
    }
    .hmain li a {
    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, where menu.js is as follows:
    
    Copy code The code is as follows:
    
    $(document).ready( function(){
    //When the DOM in the page has been loaded, the executed code
    $(".main> a,.hmain a").click(function(){
    //Found Submenu items 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( "a"));
    },function(){
    $(this).children("ul").slideToggle();
    changeIcon($(this).children("a") );
    });
    });
    /*
    *Modify the main menu indicator icon
    */
    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')");
    }
    }
    }
    
    
    This gorgeous drop-down menu is complete. The implementation is very simple, but the little knowledge points inside are very fragmentary. For example: The difference between .main a and .main>a is that the former selects all a nodes using the element content of this class of .main, while the latter only selects a nodes among the child nodes of .main.
    
    Examples like this are very applicable. Use them in websites to make the interface more beautiful. There are only 3 examples, so hurry up and continue reading...