jQuery realizes the sliding effect of drop-down menu

When we make a web page, sometimes we want to have a cool and smooth drop-down menu. Although we can use the most basic CSS and JS to complete it, with jQuery we only need very short codes to achieve the following effect.

Isn’t it very smooth? When the mouse moves to the target, a drop-down menu will automatically appear. Only two lines of code are needed:

$(" ").hover(function() {
$(this).children(" ").slideToggle();
});

Among them, hover is a compound wording of the mouse passing and leaving, which is usually written like this

$(" ").hover(function() {
     $(this).children(" ").slideDown() );
 }, function() {
     $(this).children(" ").slideUp() );
 });

That is, write two functions in hover, one for when the mouse passes over and the other for when the mouse leaves, and separate the two with a comma. However, you can see that I only wrote one function in the code above. This is because if we only write one function in hover, then the effect will be repeated when the mouse passes over or leaves, which is easier to write.

Use it in the overall code like this:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size:20px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height:50px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 50px;
            color: black;
   border:1px solid skyblue;
        }
        
        .nav>li>a:hover {
            background-color: pink;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
 
<body>
    <ul class="nav">
        <li>
            <a href="#" >Message</a>
            <ul>
                <li>
                    <a href="">Follow</a>
                </li>
                <li>
                    <a href="">Comments</a>
                </li>
                <li>
                    Like
                </li>
            </ul>
        </li>
        <li>
            <a href="#" >Message</a>
            <ul>
                <li>
                    <a href="">Follow</a>
                </li>
                <li>
                    <a href="">Comments</a>
                </li>
                <li>
                    Like
                </li>
            </ul>
        </li>
  <li>
      <a href="#" >Message</a>
      <ul>
          <li>
              <a href="">Follow</a>
          </li>
          <li>
              <a href="">Comments</a>
          </li>
          <li>
              Like
          </li>
      </ul>
  </li>
    </ul>
    <script>
        $(function() {
            $(".nav>li").hover(function() {
                $(this).children("ul").slideToggle();
            });
        })
    </script>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Code for implementing drop-down menu effect using jQuery
A super simple drop-down menu implemented with jQuery
Jquery drop-down menu with search box
jQuery implements the effect of displaying the secondary drop-down menu when the mouse is moved over
A small example of jQuery clicking on a drop-down menu
JQuery sets the value of a certain option in the drop-down menu (more complete)
jQuery controls sliding in different directions (sliding left, right, etc.)
How to use jQueryMobile to achieve sliding page turning effect
Horizontal scroll bar (slider) based on jQuery
The menu written with jQuery slides from left to right

<<: Public free STUN servers

>>: Detailed steps to install VMware Tools from scratch (graphic tutorial)