Cách thực hiện - Thanh bên thả xuống
Tìm hiểu cách thêm menu thả xuống bên trong điều hướng bên.
Menu thả xuống trong Sidenav
Tạo thanh bên thả xuống
Bước 1) Thêm HTML:
Thí dụ
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<a href="#contact">Search</a>
</div>
Giải thích ví dụ
Sử dụng bất kỳ phần tử nào để mở menu thả xuống, ví dụ: phần tử <button>, <a> hoặc <p>.
Sử dụng phần tử vùng chứa (như <div>) để tạo menu thả xuống và thêm các liên kết thả xuống bên trong nó. Chúng tôi sẽ sử dụng cùng một kiểu cho tất cả các liên kết bên trong sidenav.
Bước 2) Thêm CSS:
Thí dụ
/* Fixed sidenav, full height */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top:
0;
left: 0;
background-color: #111;
overflow-x:
hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a,
.dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover
{
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding:
0px 10px;
}
/* Add an active
class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default).
Optional: add a lighter background color and some left padding to change the
design of the dropdown content */
.dropdown-container {
display:
none;
background-color: #262626;
padding-left: 8px;
}
/* Optional:
Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
Bước 3) Thêm JavaScript:
Thí dụ
//* Loop through all dropdown buttons to toggle between hiding and showing its
dropdown content - This allows the user to have multiple dropdowns without any
conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click",
function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display
=== "block") {
dropdownContent.style.display
= "none";
} else {
dropdownContent.style.display = "block";
}
});
}
Mẹo: Đi tới Hướng dẫn CSS thả xuống của chúng tôi để tìm hiểu thêm về trình đơn thả xuống.
Mẹo: Đi tới Danh sách thả xuống có thể nhấp của chúng tôi để tìm hiểu thêm về danh sách thả xuống có thể nhấp
Mẹo: Đi tới Hướng dẫn về thanh điều hướng CSS của chúng tôi để tìm hiểu thêm về thanh điều hướng.
Mẹo: Đi tới Hướng dẫn điều hướng bên của chúng tôi để tìm hiểu về cách tạo điều hướng bên có thể đóng.