Một menu thả xuống đẹp có thể được tạo không chỉ bằng JavaScript mà còn có thể sử dụng các thẻ HTML tiêu chuẩn. Phương pháp tạo menu thả xuống này sẽ hữu ích cho những ai mới bắt đầu bước đầu tiên trong việc tạo trang web và muốn đơn giản hóa công việc tạo menu trên các trang.
Hướng dẫn
Bước 1
Trong mã HTML, một menu như vậy là một danh sách không có thứ tự với các danh sách lồng nhau bên trong. Để bắt đầu, hãy tạo tệp style.css và sao chép mã CSS sau vào đó để tạo kiểu và định dạng menu:
#nav, #nav ul {
list-style: none;
lề: 0;
đệm: 0;
viền: 1px solid # 000;
nền: # 515151;
float: trái;
chiều rộng: 100%;
}
#nav li {
float: trái;
chức vụ: thân nhân;
màu nền: # 003366;
back / ground: không có;
}
#nav li ul {
không trưng bày;
vị trí: tuyệt đối;
màu nền: # 003366;
đệm: 8px 0;
chiều rộng: 138px;
}
Bước 2
Bây giờ chúng ta cần thêm một số trang trí cho các mục menu. Xác định chiều rộng và chiều cao cho chúng, loại bỏ các dòng gạch dưới, đặt chiều rộng rõ ràng cho mỗi liên kết và chỉ định màu nền mong muốn.
Bước 3
Đối với tất cả những thay đổi này, hãy thêm mã sau vào tệp:
#nav a {
màu: #fff;
văn bản-trang trí: không có;
hiển thị: khối;
chiều rộng: 120px;
đệm: 4px 10px;
background-color: # 003366 repeat-y right;
}
#nav a: hover {
màu: # 000;
màu nền: # 0033FF;
}
#nav li: hover {
màu nền: # 333333;
}
Sau đó, thêm đoạn mã sau để hoàn thiện menu:
#nav li: di chuột li ul {
không trưng bày;
chiều rộng: 138px;
đầu trang: -9px;
trái: 133px;
}
#nav li: hover li: hover ul {
hiển thị: khối;
}
Bước 4
Trong phiên bản HTML, danh sách menu không có thứ tự chung trông giống như thế này - trên cơ sở của nó, menu được tạo, đã được đề cập trong bài viết.
- Trang Chủ
-
Mục lục
-
Tất cả sản phẩm
- Theo ngày
- Nhà sản xuất của
- Khác
-
