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:
Ví 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>
Ví dụ giải thích
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 kiểu dáng giống nhau cho tất cả các liên kết bên trong sidenav.
Bước 2) Thêm CSS:
Ví 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;
}
Hãy tự mình thử » Bước 3) Thêm JavaScript:
Ví 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";
}
});
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn thả xuống CSS của chúng tôi để tìm hiểu thêm về danh sách 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: Hãy truy cập 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.