Home > Article > Web Front-end > How to make a dynamic drop-down menu using HTML, CSS and jQuery
How to make a dynamic drop-down menu using HTML, CSS and jQuery
- 王林Original
- 2023-10-25 12:28:571443browse
How to use HTML, CSS and jQuery to create a dynamic drop-down menu
With the continuous development of Web technology, dynamic drop-down menus have become common in modern web design One of the elements. It provides better user experience and navigation capabilities. In this article, we'll learn how to make a dynamic drop-down menu using HTML, CSS, and jQuery, with some concrete code examples.
- HTML Structure
First, let’s build the basic HTML structure. Here is a simple example:
<!DOCTYPE html>
<html>
<head>
<title>动态下拉菜单</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li class="dropdown">
<a href="#">菜单4</a>
<ul class="submenu">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单5</a></li>
</ul>
</nav>
</body>
</html>- CSS Style
Next, we need to use CSS styles to set the appearance of the drop-down menu. Here is a simple example:
/* 清除默认样式 */
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
/* 导航菜单样式 */
nav ul.menu li {
display: inline-block;
position: relative;
}
nav ul.menu li a {
display: block;
padding: 10px;
background-color: #333;
color: #fff;
text-decoration: none;
}
nav ul.menu li.dropdown:hover .submenu {
display: block;
}
/* 子菜单样式 */
nav ul.menu li .submenu {
display: none;
position: absolute;
top: 40px;
left: 0;
background-color: #333;
}
nav ul.menu li .submenu li {
display: block;
}
nav ul.menu li .submenu li a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
}- jQuery Effect
Finally, we need to use jQuery to add some interactive effects. A simple hover function is used here to show and hide the submenu:
$(document).ready(function() {
$('nav ul.menu li.dropdown').hover(
function() {
$(this).find('.submenu').stop().slideDown();
},
function() {
$(this).find('.submenu').stop().slideUp();
}
);
});- Conclusion
Through the above steps, we successfully made a dynamic drop-down menu. When the mouse is hovered over Menu 4, the submenu will be displayed. The submenu disappears when the mouse is moved away. This simple example can help beginners understand how to use HTML, CSS and jQuery to create dynamic drop-down menus.
To summarize, making a dynamic drop-down menu requires the following steps: build an HTML structure, use CSS styles to set the appearance, and use jQuery to add interactive effects. Hope this article helps you!
The above is the detailed content of How to make a dynamic drop-down menu using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!