Trong bài đăng này, chúng ta sẽ khám phá cách tạo chức năng bật tắt cho Menu / SideBar bằng CSS thuần túy và không có Javascript.
Chức năng chuyển đổi thường được xây dựng bằng JavaScript vì nó yêu cầu xử lý sự kiện nhấp chuột.
Nhưng nó có thể được xây dựng bằng CSS thuần túy và không có JavaScript.
Demo:
Đây là cách làm.
1 - Mã HTML
Hãy bắt đầu với một mã html đơn giản cho thanh bên.
Ví dụ
<aside class="aside-wrapper">
<h1 class="logo-text"><span>Qpay</span>
<i class="fas fa-bars sidebar-toggle"></i>
</h1>
<ul>
<li><i class="fas fa-home"></i> Home</li>
<li><i class="fas fa-building"></i> Company</li>
<li><i class="fas fa-dollar-sign"></i> Perks</li>
<li><i class="fas fa-file-contract"></i> Legal</li>
<li><i class="fas fa-credit-card"></i> Payments</li>
</ul>
<ul>
<li><i class="fas fa-headset"></i> Get Help</li>
<li><i class="fas fa-comment"></i> Chat With Us</li>
</ul>
</aside>2 - Thêm thẻ input (input type checkbox)
Ngay phía trên Sidebar , thêm thẻ input.
Ví dụ
<input type="checkbox" id="toggler" checked />
<aside class="aside-wrapper">
<h1 class="logo-text"><span>Qpay</span>
<i class="fas fa-bars sidebar-toggle"></i>
</h1>
...
</aside>3 - Chuyển đổi Sidebar
Giờ đây, dựa trên trạng thái checked / Unchecked của thẻ input, chúng ta có thể hiển thị và ẩn Sidebar trong CSS.
Đoạn mã dưới đây cho biết: Nếu thẻ input được chọn, hãy di chuyển Sidebar sang trái 250px. (250px là chiều rộng của Sidebar.)
Ví dụ
/* Toggler Functionality */
input:checked ~ aside {
left: -250px;
}Bây giờ, việc chuyển đổi thẻ input sẽ hiển thị và ẩn Sidebar.
4 - Menu Hamburger
Nhưng chúng tôi muốn điều này hoạt động khi chúng tôi nhấp vào biểu tượng bánh hamburger chứ không phải thẻ input.
- Ẩn input. (
display: none) - Bọc hamburger menu trong một thẻ nhãn (
label) có thuộc tính "for".
Id của thẻ input và thuộc tính for cho nhãn phải giống nhau. (Điều này sẽ kích hoạt thẻ input khi chúng ta nhấp vào biểu tượng bánh hamburger.)
Ví dụ
<!-- Input checkbox "ID" = "toggler" -->
<input type="checkbox" id="toggler" checked />
<aside class="aside-wrapper">
<h1 class="logo-text"><span>Qpay</span>
<!-- Label "FOR" = "toggler" -->
<label for="toggler">
<i class="fas fa-bars sidebar-toggle"></i>
</label>
</h1>
...
</aside>Chúng tôi đã tạo một chức năng chuyển đổi mà không có JavaScript.