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)

Randomly generate an eight-digit discount code and save it to the MySQL database

jQuery realizes the sliding effect of drop-down menu

Randomly generate an eight-digit discount code and save it to the MySQL database

A brief analysis of the examples and differences of using nohup and screen to run background tasks in Linux

Operate on two columns of data as new columns in sql

Linux kernel device driver system call notes

Detailed explanation of MySQL's FreeList mechanism

Detailed explanation of the use of css-vars-ponyfill in IE environment (nextjs build)

Collection of 25 fonts used in famous website logos

Example of how to configure nginx to implement SSL

Graphical steps of zabbix monitoring vmware exsi host

MySQL 8.0.18 adds users to the database and grants permissions

Recommend

Graphic tutorial for installing MySQL 5.6.35 on Windows 10 64-bit

MySQL 5.7.23 installation and configuration graphic tutorial

MySQL table deletion operation implementation (differences between delete, truncate, and drop)

6 ways to implement the maximum and minimum values of an array in javascript

Introduction to new features of ECMAscript

Mysql SQL statement operation to add or modify primary key

MySQL 5.7.15 version installation and configuration method graphic tutorial

MySQL 8.0 error The server requested authentication method unknown to the client solution

Solution to the problem that Xshell cannot connect to the virtualBox virtual machine

Common methods and problems of Docker cleaning

How to install mysql in docker

Web form creation skills

A brief discussion on HTML ordered lists, unordered lists and definition lists

Sample code for html list box, text field, and file field

Problems and solutions for MYSQL5.7.17 connection failure under MAC