Share my jquery implementation of drop-down menu heart_jquery

Summary:

The jquery library has brought us a lot of conveniences. It is very simple to use jquery to implement a simple drop-down menu, but there are also different implementation methods. Today I used jquery to write a drop-down menu. I referred to Xiaofeng Wang's SexyDropDownMenu2010. There are still some things in it that I feel are worth recording.

Implementation:

First, post his code (it’s too long to post the whole code, so just pick up some parts),

　1. ul list in html

 <ul class="topmenu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul class="submenu1">
          <li><a href="#">Ch1</a></li>
          <li><a href="#">Ch2</a>
            <ul class="submenu11">
              <li><a href="#">Ch21</a>
                <ul class="submenu11">
                  <li><a href="#">Ch211</a>
                    <ul class="submenu11">
                      <li><a href="#">Ch2111</a>
                        <ul class="submenu11">
                          <li><a href="#">Ch21111</a></li>
                          <li><a href="#">Ch21112</a></li>
                          <li><a href="#">Ch21113</a></li>
                          <li><a href="#">Ch21114</a></li>
                          <li><a href="#">Ch21115</a></li>
                          <li><a href="#">Ch21116</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Ch2112</a></li>
                      <li><a href="#">Ch2113</a></li>
                      <li><a href="#">Ch2114</a></li>
                      <li><a href="#">Ch2115</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Ch212</a></li>
                  <li><a href="#">Ch213</a></li>
                  <li><a href="#">Ch214</a></li>
                </ul>
              </li>
              <li><a href="#">Ch22</a>
                <ul class="submenu11">
                  <li><a href="#">Ch221</a></li>
                  <li><a href="#">Ch222</a></li>
                  <li><a href="#">Ch223</a></li>
                </ul>
              </li>
              <li><a href="#">Ch23</a></li>
            </ul>
          </li>
          <li><a href="#">Ch3</a>
            <ul class="submenu11">
              <li><a href="#">Ch31</a></li>
              <li><a href="#">Ch32</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Resources</a>
        <ul class="submenu1">
          <li><a href="#">Sub Nav Link</a></li>
          <li><a href="#">Sub Nav Link</a></li>
        </ul>
      </li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Advertise</a></li>
      <li><a href="#">Submit</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>

It is a six-level menu structure, as shown below

　2. js part (css will not be posted)

$(document).ready(function() {
  //第一部分
  // Top Menu
  //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*)
  $("ul.submenu1").parent().append("<span></span>"); 
  //第二部分
  $("ul.topmenu li span").click(function() { //When trigger is clicked...
    //Following events are applied to the submenu1 itself (moving submenu1 up and down)    
    //Drop down the submenu1 on click
    $(this).parent().find("ul.submenu1").slideDown('fast').show();   
    //在click后给绑定hover处理函数，感觉是比较巧妙的地方
    $(this).parent().hover(function() {
    }, function() {
      //When the mouse hovers out of the submenu1, move it back up
      $(this).parent().find("ul.submenu1").slideUp('slow'); 
    });
    //Following events are applied to the trigger (Hover events for the trigger)
  }).hover(function() {
    //On hover over, add class "hover"
    $(this).addClass("hover"); 
  }, function() {  //On Hover Out
    //On hover out, remove class "hover"
    $(this).removeClass("hover"); 
  });
  //第三部分
  $("ul.topmenu li ul.submenu1 li").hover(function() {
    $(this).find("ul.submenu11:first").show("slow");
  }, function() {
    $(this).find("ul.submenu11:first").hide("fast");
  });
})；

Part One:

Added a trigger button under the menu

Part 2:

Bound a handler function for click event

After the trigger button is clicked, the hover processing function is bound to the outermost li of the drop-down menu, which feels quite clever.

Bind the hover function to the outermost li. The processing function here is written so that no processing is performed when the mouse hovers over the li (the first function is empty), and the li is closed when the mouse leaves.

In this way, the menu that expands ul later will be inside the outermost li, so that the menu will not be automatically closed, which means that when the mouse leaves the entire menu, the li will be automatically closed.

Part Three:

Bind a function to the hover event of the nested ul under the menu to expand and collapse the next level menu

$(this).find("ul.submenu11:first") is also more clever to obtain the descendants of each element in the current matching element set through find, and filter the next generation elements through "ul.submenu11:first" Expand.

At the same time, a collapsing processing function is also bound to the next-level menu, which works together with the collapsing function bound to the outermost li by click in the trigger menu. It is the automatic collapsing function of the menu.

Summary:

　It shows the power and flexibility of jquery filter, and also reflects the beautiful chain syntax of jquery.

Let me share with you a pure jQuery horizontal drop-down menu implementation

<!DOCTYPE html>
<html>
  <head>
   <title>jQuery水平下拉菜单实现</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
   <!--[if lt IE 9]>
     <script src="bootstrap/js/html5shiv.js"></script>
     <script src="bootstrap/js/respond.min.js"></script>
   <![endif]-->
   <style type="text/css">
 .menus{border:1px solid red; float:left; margin-left:4px; background:red;}
 .menus a{display:block; width:100px; text-align:center;}
 .menu{display:none;}
 a{cursor:pointer;text-decoration:none;}
 a:hover{background:white; text-decoration:none;}
 a:visited{text-decoration:none; color:black;}
  </style>
   <script>
    $(function(){
 $(".menu-title").click(function(){
 $(this).next().toggleClass();
 });
    });
   </script>
  </head>
  <body> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div>
  </body>
</html>