Home >Web Front-end >JS Tutorial >HTML, CSS and jQuery: Make an animated accordion menu
HTML, CSS and jQuery: Make an animated accordion menu
- WBOYOriginal
- 2023-10-27 16:33:521543browse
HTML, CSS and jQuery: Making an animated collapsible menu
In web development, collapsible menus are a common interactive element that can save pages space, while also improving user experience. This article will introduce how to use HTML, CSS and jQuery to create an animated folding menu and provide specific code examples.
- HTML structure
First, we need to define an HTML structure to build a collapsible menu. The following is a simple HTML structure example:
<div class="menu-item">
<h3 class="menu-title">菜单标题</h3>
<div class="menu-content">
<!-- 菜单内容 -->
</div>
</div>In the above code, .menu-item is the outermost container, .menu-title is the title of the menu, .menu-content is the content of the menu, which is hidden in the initial state.
- CSS Style
Next, we need to add some CSS styles to the collapse menu to define the appearance and animation effects of the menu. The following is a basic CSS style example:
.menu-item {
margin-bottom: 10px;
}
.menu-title {
cursor: pointer;
}
.menu-content {
display: none;
}
.menu-content.show {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}In the above code, we added some bottom spacing to .menu-item to give a certain interval between menus. cursor: pointer is set for .menu-title to change the mouse style to indicate that the menu can be clicked to expand or collapse. The initial state of .menu-content is hidden. When the .show class name is added, the menu content will be displayed with a fade-in animation effect.
- jQuery animation effect
In order to realize the menu expansion and collapse function, we can use jQuery to add animation effects. The following is a basic jQuery code example:
$(document).ready(function() {
$('.menu-title').click(function() {
$(this).siblings('.menu-content').toggleClass('show');
});
});In the above code, we use $(document).ready() to ensure that the page is loaded before executing the code. When the .menu-title element is clicked, use the toggleClass() method to switch the .show class name to achieve the expansion and collapse effect of the menu content.
- Complete sample code and effect preview
The following is a complete HTML file code example. You can copy and paste the code into an HTML file and view the effect in the browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>折叠菜单</title>
<style>
.menu-item {
margin-bottom: 10px;
}
.menu-title {
cursor: pointer;
}
.menu-content {
display: none;
}
.menu-content.show {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('.menu-title').click(function() {
$(this).siblings('.menu-content').toggleClass('show');
});
});
</script>
</head>
<body>
<div class="menu-item">
<h3 class="menu-title">菜单标题1</h3>
<div class="menu-content">
<p>菜单内容1</p>
</div>
</div>
<div class="menu-item">
<h3 class="menu-title">菜单标题2</h3>
<div class="menu-content">
<p>菜单内容2</p>
</div>
</div>
<div class="menu-item">
<h3 class="menu-title">菜单标题3</h3>
<div class="menu-content">
<p>菜单内容3</p>
</div>
</div>
</body>
</html>You can run the above code in the browser, click on the menu title, and you will see the menu content expand and collapse with a fade-in animation effect.
To sum up, by using HTML, CSS and jQuery, we can easily create a folding menu with animated effects. I hope the sample code in this article can be helpful to you, go and try it!
The above is the detailed content of HTML, CSS and jQuery: Make an animated accordion menu. For more information, please follow other related articles on the PHP Chinese website!