Dưới đây là code tham khảo Tạo một menu đơn giản và hiển thị dropdown menu khi click vào các mục với HTML, CSS và jQuery
HTML
<nav>
<ul>
<li><a href="#">Trang chủ</a></li>
<li class="dropdown">
<a href="#">Sản phẩm</a>
<ul>
<li><a href="#">Sản phẩm 1</a></li>
<li><a href="#">Sản phẩm 2</a></li>
<li><a href="#">Sản phẩm 3</a></li>
</ul>
</li>
<li><a href="#">Giới thiệu</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>
CSS
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 10px;
text-decoration: none;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
width: 200px;
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 200px;
}
jQuery
$(document).ready(function() {
$('nav li').click(function() {
$(this).find('ul').slideToggle();
});
});
Giải thích:
- HTML: Tạo một menu đơn giản với các mục và một dropdown menu bên trong mục “Sản phẩm”.
- CSS: Thiết lập các kiểu dáng cho menu và dropdown menu.
- JavaScript:
- Sử dụng phương thức
click
để bắt sự kiện click vào một mục. - Sử dụng phương thức
find
để tìm dropdown menu trong mục đó và sử dụng phương thứcslideToggle
để hiển thị hoặc ẩn dropdown menu khi click vào mục.
- Sử dụng phương thức