CSS - Dropdowns: A Beginner's Guide

Xin chào các bạn future web designers! Hôm nay, chúng ta sẽ cùng khám phá thế giới tuyệt vời của CSS dropdowns. Là người bạn hàng xóm thân thiện của các bạn, tôi rất háo hức dẫn dắt các bạn trong hành trình này. Đừng lo lắng nếu bạn chưa từng viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản nhất và dần dần nâng cao. Vậy, hãy cầm một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu nhé!

What is a CSS Dropdown? (CSS Dropdown là gì?)

Trước khi chúng ta nhảy vào mã, hãy cùng hiểu dropdown là gì. Hãy tưởng tượng bạn đang ở một nhà hàng sang trọng, và nhân viên phục vụ đưa cho bạn một thực đơn. Nhưng đây không phải là bất kỳ thực đơn nào - đây là một thực đơn ma thuật! Khi bạn chạm vào "Appetizers," một danh sách các món ăn nhẹ ngon xuất hiện. Đó chính xác là điều mà dropdown làm trên một trang web. Đó là một thực đơn mà khi tương tác, sẽ tiết lộ thêm các tùy chọn.

Bây giờ, hãy cùng xem chúng ta có thể tạo ra điều ma thuật này với CSS như thế nào!

CSS Dropdown - Basic Example (CSS Dropdown - Ví dụ cơ bản)

Hãy bắt đầu với một menu dropdown đơn giản. Dưới đây là mã HTML và CSS:

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Liên kết 1</a>
<a href="#">Liên kết 2</a>
<a href="#">Liên kết 3</a>
</div>
</div>

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

Hãy phân tích này:

1. Chúng ta tạo một container (<div class="dropdown">) cho toàn bộ dropdown của mình.
2. Bên trong, chúng ta có một nút (<button class="dropbtn">) sẽ kích hoạt dropdown.
3. Nội dung thực tế của dropdown nằm trong một div khác (<div class="dropdown-content">).
4. Chúng ta sử dụng CSS để ẩn nội dung dropdown theo mặc định (display: none;).
5. Khi chúng ta di chuột qua container dropdown, chúng ta hiển thị nội dung (display: block;).

CSS Dropdown - Hoverable Effect (CSS Dropdown - Hiệu ứng di chuột)

Bây giờ chúng ta đã có dropdown cơ bản, hãy làm cho nó trở nên sang trọng hơn với hiệu ứng di chuột:

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

CSS này sẽ thay đổi màu sắc của nút khi bạn di chuột qua. Đó như thể nút đang nói, "Hey, tôi sẵn sàng để hiển thị thêm tùy chọn cho bạn!"

CSS Dropdown - Clicked Dropdowns (CSS Dropdown - Dropdown khi nhấp)

Đôi khi, chúng ta muốn dropdown xuất hiện khi nhấp而不是 chỉ di chuột qua. Dưới đây là cách chúng ta có thể làm điều đó với một chút JavaScript:

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Liên kết 1</a>
<a href="#">Liên kết 2</a>
<a href="#">Liên kết 3</a>
</div>
</div>

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

.show {display:block;}

Script này sẽ bật/tắt lớp 'show' khi nhấp vào nút, và đóng dropdown nếu bạn nhấp ở bất kỳ nơi nào khác trên trang.

CSS Dropdown - Right-aligned Menu (CSS Dropdown - Menu canh phải)

Vậy nếu chúng ta muốn dropdown canh phải thay vì canh trái? Dễ ợt!

.dropdown-content {
right: 0;
}

Chỉ cần thêm này vào CSS hiện có. Nó như thể bạn đang nói với dropdown, "Hãy di chuyển sang phải, xin nhé!"

CSS Dropdown - Left-aligned Menu (CSS Dropdown - Menu canh trái)

Để đầy đủ, đây là cách để bạn canh trái menu (mặc dù điều này thường là mặc định):

.dropdown-content {
left: 0;
}

CSS Dropdown - With Image (CSS Dropdown - Kèm hình ảnh)

Hãy làm cho dropdown của chúng ta trở nên thú vị hơn bằng cách thêm một hình ảnh:

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#"><img src="img_5terre.jpg" alt="Cinque Terre" width="100"></a>
<a href="#">Liên kết 1</a>
<a href="#">Liên kết 2</a>
</div>
</div>

.dropdown-content img {
margin: 10px 0;
}

Bây giờ dropdown của bạn có một hình ảnh đẹp ở trên cùng. Nó như thể thêm một quả mọng lên trên kem của CSS của bạn!

CSS Dropdown - With Navbar (CSS Dropdown - Kèm thanh导航)

Cuối cùng, hãy cùng xem cách chúng ta có thể tích hợp dropdown vào thanh导航:

<ul class="navbar">
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Tin tức</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Liên kết 1</a>
<a href="#">Liên kết 2</a>
<a href="#">Liên kết 3</a>
</div>
</li>
</ul>

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.navbar .dropdown {
display: inline-block;
}

Và thế là bạn đã có! Một thanh导航 hoàn chỉnh với một menu dropdown.

Conclusion (Kết luận)

Chúc mừng! Bạn vừa học cách tạo ra các loại CSS dropdown khác nhau. Nhớ rằng, thực hành là chìa khóa, vì vậy đừng ngại thử nghiệm với các ví dụ này. Thay đổi màu sắc, thêm动画, hoặc thậm chí thử kết hợp các loại dropdown khác nhau trên một trang.

Dưới đây là bảng tham khảo nhanh các phương pháp chúng ta đã xem xét:

Phương pháp	Mô tả
Basic Dropdown	Dropdown đơn giản xuất hiện khi di chuột qua
Hoverable Effect	Dropdown với hiệu ứng thay đổi màu sắc khi di chuột qua
Clicked Dropdown	Dropdown xuất hiện khi nhấp
Right-aligned Menu	Dropdown canh phải
Left-aligned Menu	Dropdown canh trái (mặc định)
With Image	Dropdown kèm hình ảnh
With Navbar	Dropdown tích hợp vào thanh导航

Nhớ rằng, trong thế giới thiết kế web, sáng tạo là bạn đồng hành tốt nhất của bạn. Vậy hãy tiến lên và tạo ra những dropdown tuyệt vời! Ai biết được, có thể bạn sẽ phát minh ra điều gì lớn lao trong thế giới导航 web. Chúc bạn may mắn với mã code của mình!

Credits: Image by storyset