Menu thả xuống CSS

Mã của chúng tôi trả về như sau:

Cho đến nay, chúng tôi chưa thêm bất kỳ kiểu nào vào menu thả xuống của mình, vì vậy, nó xuất hiện ở dạng HTML thuần túy. Đây là mã chúng tôi sẽ sử dụng để tạo kiểu menu thả xuống cho trang web của câu lạc bộ cầu lông:

.dropdown_button {
	background-color: #90EE90;
	color: white;
	padding: 10px;
	font-size: 15px;
	border: none;
}

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

.content {
	display: none;
	background-color: lightgray;
	min-width: 150px;
	z-index: 1;
	position: absolute;
}

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

.content a:hover {
	background-color: #f7f7f7;
}

.menu:hover .content {
	display: block;
}

Mã của chúng tôi trả về:

[Code result here]


Hãy phân tích cách mã của chúng ta hoạt động.

Lớp dropdown_button class được sử dụng để tạo kiểu cho nút thả xuống. Trong mã của chúng tôi, chúng tôi đặt màu nền của nút thành màu xanh lục nhạt, thay đổi màu văn bản của nút thành màu trắng, thêm phần đệm 10px xung quanh nút, đặt kích thước phông chữ của nút thành 15px và chúng tôi loại bỏ đường viền xung quanh nút.

Lớp nội dung lưu trữ các kiểu cho nội dung của menu thả xuống của chúng tôi. Lớp này bị ẩn theo mặc định (sử dụng display:none) và có nền màu xám nhạt. Ngoài ra, chiều rộng tối thiểu của các phần tử sử dụng lớp nội dung là 150px và phần tử được định vị tuyệt đối. Lớp nội dung cũng có chỉ số x là 1, chỉ số này làm cho nó xuất hiện trên tất cả các phần tử khác trên trang web.

Lớp menu lưu trữ các kiểu cho toàn bộ menu của chúng ta. Trong mã của chúng tôi, chúng tôi định vị nội dung của <div class=”menu”> liên quan đến các phần tử khác trên trang web. Chúng tôi cũng hiển thị menu bằng cách sử dụng kiểu khối nội tuyến, kiểu này hiển thị phần tử của chúng tôi dưới dạng vùng chứa khối nội tuyến.

Kiểu .content a được sử dụng để tạo kiểu cho các liên kết trong menu thả xuống của chúng tôi. Kiểu này xóa tất cả gạch dưới khỏi các liên kết (sử dụng text-decoration:none;), hiển thị từng liên kết theo kiểu khối, đặt màu của từng liên kết thành màu đen và đặt phần đệm xung quanh mỗi liên kết thành 16px.

Ở cuối mã của chúng tôi, chúng tôi sử dụng quy tắc .content a:hover để xác định điều gì sẽ xảy ra khi người dùng di chuột qua một liên kết trong menu thả xuống của chúng tôi bằng cách sử dụng con trỏ của họ. Trong trường hợp này, khi người dùng di chuột qua liên kết trong menu, màu nền của liên kết được thay đổi thành màu xám nhạt (# f7f7f7).

Chúng tôi cũng đã chỉ định quy tắc .menu:hover .content hiển thị nội dung của menu của chúng tôi dưới dạng một khối khi người dùng di chuột qua menu.

Nếu bạn muốn tìm hiểu sâu hơn về cách hoạt động của CSS:hover selector, hãy đọc hướng dẫn CSS:hover selector của chúng tôi.

Menu thả xuống bên phải

Trong ví dụ trên, chúng tôi đã tạo một menu thả xuống sử dụng HTML và CSS xuất hiện ở phía bên trái của màn hình. Tuy nhiên, bạn có thể quyết định rằng bạn muốn menu thả xuống xuất hiện ở bên phải màn hình.

Để điều này xảy ra, bạn có thể áp dụng quy tắc CSS sau cho đoạn mã trên:

.content {
	right: 0;
}

Quy tắc này sẽ di chuyển menu thả xuống và nội dung của nó sang bên phải màn hình.

Kết luận

HTML có thể được sử dụng để tạo cấu trúc cơ bản của menu thả xuống. Sau đó, bạn có thể sử dụng CSS để áp dụng các kiểu để tạo một menu thả xuống hoàn chỉnh và đẹp mắt về mặt thẩm mỹ.

Hướng dẫn này đã thảo luận, có tham chiếu đến một ví dụ, cách tạo menu thả xuống bằng HTML và CSS. Sử dụng mã mà chúng ta đã thảo luận trong bài viết này, bạn sẽ có thể tạo menu thả xuống của riêng mình trong HTML và CSS.