Đối với mỗi website thì menu là một phần không thể thiếu, và menu dạng xổ xuống luôn được ưu tiên trong việc thiết kế. Cùng tham khảo bài viết dưới đây giúp bạn biết cách tạo menu dropdown bằng css một cách dễ dàng.
Dạng của menu xổ xuống.
1. Tạo File menu HTML
Đây là bước đầu tiên và rất quan trọng, nó làm tiền đề giúp bạn có thể tạo menu dropdown bằng css. Thông thường trong hệ lập trình sẽ có sẵn những file html, hoặc bạn cũng có thể tạo ra file trắng rất nhanh và đơn giản.
Sử dụng file Manager cho việc tạo một tập tin trắng này. Ngoài ra, bạn cũng có thể tạo thông qua một file upload mang tên FTP client.
2. Thêm mã cho menu html
Meu được tạo ra sẽ là menu chính và bao gồm 5 mục nhỏ để có thể tham khảo thêm. Và việc bạn thay đổi địa chỉ url bên trong menu sẽ giúp dễ dàng lên kết tới một menu con khác hoặc một trang website bất kỳ do bạn tạo ra. Mỗi thư mục nằm ở một class khác nhau, vì vậy sẽ không hề xảy ra hiện tượng trùng lặp không đáng có.
Đầu tiên là menu xổ xuống, tiếp đến là lớp menu chính và cuối cùng là lớp menu con bên trong. Các lớp khác nhau được sử dụng để tạo ra css rules riêng biệt. Điểm hạn chế của html chính và việc không tối ưu hóa được các dữ liệu cũng như hình thức thể hiện và trình bày ra các lớp menu không được đẹp mắt, nhưng tất cả sẽ được hoàn chỉnh bởi công cụ css.
Các bạn sẽ thêm câu lệnh CSS như sau:
<div class=”dropdown”>
<button class=”mainmenubtn”>Main menu</button>
<div class=”dropdown-child”>
<a href=”http://wwww.yourdonain.com/page1.html”>Child menu 1</a>
<a href=”http://wwww.yourdonain.com/page2.html”>Child menu 2</a>
<a href=”http://wwww.yourdonain.com/page3.html”>Child menu 3</a>
<a href=”http://wwww.yourdonain.com/page4.html”>Child menu 4</a>
<a href=”http://wwww.yourdonain.com/page5.html”>Child menu 5</a>
</div>
</div>
3. Sử dụng css và tạo hiệu ứng cho menu xổ xuống
Sử dụng css rule và thêm những hiệu ứng phù hợp.
Ở mainmenubtn sử dụng CSS rule background – color là red, color: white, border: none; cursor là pointer, padding: 20px và margin – top: 20px. Khi người dùng nhấp chuột tới vị trí của mainmenubtn: hover thì background – color vẫn là đỏ. Nhưng đối với dropdown – child thì phần display ở CSS rule là none, khi đến dropdown – child: hover thì sẽ là block. Đây chính là cách tạo hiệu ứng ở menu xổ xuống, giúp nó thu hút và hấp dẫn hơn đối với khách hàng.
Đây là câu lệnh bạn có thể thêm vào để CSS Menu có chức năng Dropdown:
.mainmenubtn {
background-color: red;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
}
.mainmenubtn:hover {
background-color: red;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: black;
min-width: 200px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
Tùy vào nhu cầu mà bạn có thể tạo các hiệu ứng khác nhau với màu sắc, kích thước và quy luật bất biến để giúp menu phù hợp hơn với tiêu chí ban đầu và đạt được mức độ thành công nhất định.
Trên đây là ba bước trong việc tạo menu dropdown bằng css mà bạn có thể tham khảo. Nếu vẫn còn những băn khoăn và thắc mắc thì hãy truy cập vào website: gtvseo.vn/, để đọc thêm thông tin. Chúng tôi rất sẵn lòng giải đáp mọi thắc mắc của khách hàng giúp cho việc tạo lập được menu này được nhanh chóng và tốt nhất.
