Nếu bạn sử dụng Internet, có thể bạn đã sử dụng menu thả xuống trước đây. Chúng chủ yếu phục vụ hai mục đích: thu thập đầu vào của người dùng trong các biểu mẫu web và triển khai các menu hành động/điều hướng trong các ứng dụng web.
Danh sách thả xuống là một trong những cách tốt nhất để cung cấp nhiều tùy chọn cho một tập hợp các thành phần tương tự mà không cần phải ảnh hưởng đến luồng bố cục chung của ứng dụng. Ngoài các ứng dụng web, chúng cũng được sử dụng trong phần mềm độc lập, hệ điều hành, v.v.
Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo menu điều hướng thả xuống bằng HTML, CSS và JavaScript.
Đây là một ảnh chụp màn hình của những gì bạn sẽ xây dựng. Ở cuối hướng dẫn này, tôi sẽ đính kèm tệp codepen để bạn có thể sử dụng nó.
Bây giờ chúng ta đã đề cập đến các nguyên tắc cơ bản của trình đơn thả xuống, hãy thảo luận về các bước để xây dựng một trình đơn.
Bước 1 – Thêm Đánh dấu cho Danh sách thả xuống
Vì chúng tôi sẽ sử dụng các biểu tượng trong hướng dẫn này nên trước tiên chúng tôi cần nhập chúng. Để đơn giản, chúng ta sẽ sử dụng thư viện miễn phí có tên là Boxicons. Vui lòng chọn các lựa chọn thay thế khác mà bạn thích.
Có một số cách để thiết lập Boxicons trong trang web của bạn. Nhưng cách đơn giản nhất là xác định thẻ script trong head của tệp HTML của bạn, như thế này:
<head>
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
</head>Sau khi nhập các biểu tượng, hãy tạo một div phần tử với một lớp container. Phần tử này sẽ chứa button và trình đơn thả xuống.
Bên trong vùng chứa, tạo một phần tử nút và đặt cho nó một lớp và id là btn. Đối với nút, chuyển vào văn bản nút và biểu tượng mũi tên.
Đây là đánh dấu cho nút.
<button class="btn" id="btn">
Dropdown
<i class="bx bx-chevron-down" id="arrow"></i>
</button>Tiếp theo, chúng ta sẽ thêm phần đánh dấu cho menu thả xuống. Bên dưới thẻ nút, tạo một div phần tử và cung cấp cho nó một lớp và id của dropdown. Bên trong phần tử div, tạo một a gắn thẻ cho từng mục thả xuống riêng lẻ và chuyển vào biểu tượng và văn bản tương ứng của chúng.
Đây là những gì đánh dấu trông giống như:
<div class="dropdown" id="dropdown">
<a href="#create">
<i class="bx bx-plus-circle"></i>
Create New
</a>
<a href="#draft">
<i class="bx bx-book"></i>
All Drafts
</a>
<a href="#move">
<i class="bx bx-folder"></i>
Move To
</a>
<a href="#profile">
<i class="bx bx-user"></i>
Profile Settings
</a>
<a href="#notification">
<i class="bx bx-bell"></i>
Notification
</a>
<a href="#settings">
<i class="bx bx-cog"></i>
Settings
</a>
</div>Đây là đầu ra.
Nó trông vẫn chưa đẹp – vì vậy hãy bắt đầu tạo kiểu cho menu.
Trước tiên, chúng tôi sẽ đặt lại lề và phần đệm mặc định của mọi thành phần trên trang và lưu trữ một số giá trị trong các biến để chúng tôi có thể sử dụng lại giá trị đó trong toàn bộ tệp CSS của mình. Sau đó, chúng tôi sẽ cung cấp cho phần tử cơ thể một số kiểu dáng toàn cầu.
@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
--shadow: rgba(0, 0, 0, 0.05) 0px 6px 10px 0px,
rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
--color: #166e67;
--gap: 0.5rem;
--radius: 5px;
}
body {
margin: 2rem;
background-color: #b3e6f4;
font-size: 0.9rem;
color: black;
}Bước tiếp theo là tạo kiểu cho nút và hộp chứa thả xuống. Để tăng tốc mọi thứ, tôi sẽ chỉ giải thích những phần quan trọng của kiểu dáng.
Sao chép đánh dấu bên dưới và dán vào tệp CSS của bạn.
.btn {
background-color: white;
display: flex;
align-items: center;
justify-content: flex-start;
column-gap: var(--gap);
padding: 0.6rem;
cursor: pointer;
border-radius: var(--radius);
border: none;
box-shadow: var(--shadow);
position: relative;
}
.bx {
font-size: 1.1rem;
}
.dropdown {
position: absolute;
width: 250px;
box-shadow: var(--shadow);
border-radius: var(--radius);
margin-top: 0.3rem;
background: white;
}
.dropdown a {
display: flex;
align-items: center;
column-gap: var(--gap);
padding: 0.8rem 1rem;
text-decoration: none;
color: black;
}
.dropdown a:hover {
background-color: var(--color);
color: white;
}Vì các menu thả xuống thường được đặt trên các phần tử, nút được định vị tương đối và menu thả xuống, vị trí tuyệt đối. Điều này đảm bảo rằng cả hai phần tử sẽ ở gần nhau và menu thả xuống sẽ được đặt trên các phần tử. Bằng cách này, khi được bật, nó sẽ không ảnh hưởng đến dòng chảy của trang.
Đây là đầu ra:
Bây giờ danh sách thả xuống đã được tạo kiểu, chúng tôi muốn nó chỉ xuất hiện khi nút đã được nhấp chứ không phải ngay lập tức. Để ẩn nó, chúng tôi sẽ sử dụng CSS.
Trong một bài viết trước tôi đã viết về Cách xây dựng một phương thức bằng JavaScript, chúng tôi đã sử dụng display: none để ẩn phần tử phương thức ban đầu khỏi chế độ xem. Nhưng hạn chế của việc sử dụng thuộc tính này là nó không thể hoạt ảnh được, theo MDN Docs.
Vì vậy, trong hướng dẫn này, chúng tôi sẽ thực hiện theo một cách tiếp cận khác để ẩn menu thả xuống. Điều này liên quan đến việc kết hợp các visibility và opacity các thuộc tính với nhau để có được kết quả mong muốn. Phương pháp này là cách GitHub triển khai menu thả xuống của nó.
Bên trong lớp thả xuống mà chúng tôi đã tạo trước đó, thêm thuộc tính khả năng hiển thị và đặt cho nó giá trị ẩn và đặt độ mờ thành . Thao tác này sẽ ẩn trình đơn thả xuống khỏi trang.
Để hiển thị phương thức, chúng tôi sẽ tạo một lớp riêng gọi là show. Lớp này sẽ giữ thuộc tính khả năng hiển thị với giá trị là visible và độ trong suốt của 1. Và chúng ta có thể đưa lớp này vào phương thức bằng cách sử dụng JavaScript trong giây lát.
Đây là mã:
.dropdown {
position: absolute;
width: 250px;
box-shadow: var(--shadow);
border-radius: var(--radius);
margin-top: 0.3rem;
background: white;
transition: all 0.1s cubic-bezier(0.16, 1, 0.5, 1);
transform: translateY(0.5rem);
visibility: hidden;
opacity: 0;
}
.show {
transform: translateY(0rem);
visibility: visible;
opacity: 1;
}
.arrow {
transform: rotate(180deg);
transition: 0.2s ease;
}Bên cạnh kiểu dáng để ẩn phần tử phương thức, chúng tôi đã thêm một lớp khác để xoay biểu tượng mũi tên khi nhấp vào nút thả xuống.
Bước 3 – Thêm chức năng thả xuống
Để bắt đầu, hãy lưu trữ các phần tử tương ứng của chúng ta vào các biến để chúng có thể tái sử dụng.
const dropdownBtn = document.getElementById("btn");
const dropdownMenu = document.getElementById("dropdown");
const toggleArrow = document.getElementById("arrow");Bước tiếp theo là tạo một chức năng để chuyển đổi các show class trên phần tử thả xuống và để xoay mũi tên thả xuống khi nhấp vào nút. Chúng ta sẽ đặt tên cho chức năng này toggleDropdown.
const toggleDropdown = function () {
dropdownMenu.classList.toggle("show");
toggleArrow.classList.toggle("arrow");
};Và sau đó chúng ta có thể gọi chức năng này trên nút thả xuống bằng cách sử dụng addEventListener phương pháp. Vì vậy, bất cứ khi nào nút được nhấp, nó sẽ kích hoạt chức năng điều khiển hiển thị và ẩn menu thả xuống.
dropdownBtn.addEventListener("click", function (e) {
e.stopPropagation();
toggleDropdown();
});Nếu bạn để ý, chúng tôi đã thêm một stopPropagation() phương pháp bên trong chức năng thả xuống. Điều này ngăn không cho chức năng của phần tử nút chuyển xuống phần tử cha, do đó ngăn chức năng chạy hai lần. Bạn sẽ hiểu thêm về điều này trong phần tiếp theo.
Đây là đầu ra:
Menu thả xuống thường được đóng theo bốn cách khác nhau:
- Bằng cách nhấp vào nút kích hoạt nó
- Bằng cách nhấp vào bất kỳ phần tử con nào của nó
- Bằng cách nhấp vào bên ngoài menu (trên cơ thể)
- Bằng cách nhấn phím Escape hoặc phím mũi tên xuống
Nhưng đối với hướng dẫn này, hãy tập trung vào ba điều đầu tiên.
Đầu tiên chúng ta sẽ chọn phần tử gốc <html> sử dụng document.documentElement. Và như trước đây, chúng ta sẽ vượt qua toggleDropdown() chức năng bên trong.
Nhưng lần này, chúng tôi muốn xác định một điều kiện để kiểm tra xem menu thả xuống có chứa show lớp hay không. Chỉ khi nó xảy ra, chúng ta mới muốn kích hoạt chức năng đóng.
document.documentElement.addEventListener("click", function () {
if (dropdownMenu.classList.contains("show")) {
toggleDropdown();
}
});Đây là kết quả cuối cùng:
Và đó là cách bạn tạo menu thả xuống bằng JavaScript. Dưới đây là tệp codepen để kiểm tra hoạt động của trình đơn thả xuống này.
Phần kết luận
Tôi chân thành hy vọng bạn thấy bài đăng này thú vị hoặc hữu ích. Nếu bạn đã làm, vui lòng chia sẻ với bạn bè của bạn hoặc đăng ký blog của tôi để bạn không bỏ lỡ bất kỳ bài đăng nào trong tương lai. Cảm ơn vì đã đọc.
GitHub | Twitter | Blog | danh mục đầu tư
