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:
|
>>: Detailed steps to install VMware Tools from scratch (graphic tutorial)
Recommend
mysql 8.0.12 winx64 download and installation tutorial
MySQL 8.0.12 download and installation tutorial f...
The difference and execution method of select count() and select count(1)
Count(*) or Count(1) or Count([column]) are perha...
Native JS object-oriented typing game
This article shares the specific code of JS objec...
CSS3 sets a mask for the background image and solves the problem of mask style inheritance
In many cases, you need to process the background...
Linux service monitoring and operation and maintenance
Table of contents 1. Install the psutil package S...
JS asynchronous code unit testing magic Promise
Table of contents Preface Promise chaining MDN Er...
Angular framework detailed explanation of view abstract definition
Preface As a front-end framework designed "f...
js canvas to realize the Gobang game
This article shares the specific code of the canv...
How to implement Vue binding class and binding inline style
Table of contents Binding Class Binding inline st...
MySQL server 5.7.20 installation and configuration method graphic tutorial
This article records the installation and configu...
Detailed explanation of MySQL table name case-insensitive configuration method
By default, MySQL in Linux distinguishes between ...
Telnet is moved to busybox-extras in Alpine image
The telnet in the Alpine image has been moved to ...
Process analysis of deploying ASP.NET Core applications on Linux system Docker
Table of contents 1. System environment 2. Operat...
vue-pdf realizes online file preview
This article example shares the specific code of ...
Detailed tutorial on how to log in to the system using the root user in the new version of Ubuntu 20.04
Ubuntu 20.04 does not have root login enabled by ...