Tạo menu dọc đa cấp bằng css
Bạn đang xem: Tạo menu dọc đa cấp bằng css
Về bí quyết tạo thực đơn dọc thì bạn có thể làm y hệt như tạo menu ngang, chính là tạo một cái danh sách với rồi xóa list-style-type cho các thẻ bên vào là được chứ không cần làm nhiều cách như khi làm menu ngang.
Tạo menu dọc cơ bản
Ban đầu mình sẽ có được một list menu như sau:
Trước tiên là thêm CSS cho #menu ul để thêm màu sắc nền này nọ một xíu mang lại đẹp, cùng nhất là bỏ đi mấy dòng dấu chấm đầu dòng của danh sách..
#menu ul background: #8AD385; width: 250px; padding: 0; list-style-type: none; text-align: left;Sau đó viết CSS cho các thẻ để thêm chiều cao cho nó với height và thêm line-height bằng với chiều cao để nó đứng giữa block.
#menu li width: auto; height: 40px; line-height: 40px; border-bottom: 1px solid #e8e8e8; padding: 0 1em;Cuối cùng là viết CSS đến thẻ a bên trong menu, đưa nó qua thành block cùng thêm các style đề xuất thiết, đồng thời sinh sản thêm hiệu ứng background không giống khi rê con chuột vào mục menu.
#menu li a text-decoration: none; color: #333; font-weight: bold; display: block;#menu li:hover background: #CDE2CD;Kết quả ta bao gồm thế này:
Tạo menu dọc gồm đổ xuống (dropdown)
Để kiêng việc thực hiện đến jQuery trong serie CSS cơ bản này bắt buộc mình đang hướng dẫn các bạn làm một menu dọc gồm đổ xuống nhưng không tồn tại hiệu ứng mà lại là nó đang xổ ra bên phải của menu người mẹ khi rê loài chuột vào.
Bây giờ bạn hãy làm lại cái menu đơn giản dễ dàng phía bên trên và bổ sung cập nhật các menu con vào như thế này:
tin tức
Và thực hiện lại CSS tại phần trên:
body font-family: sans-serif; font-size: 15px;#menu ul background: #8AD385; width: 250px; padding: 0; list-style-type: none; text-align: left;#menu li width: auto; height: 40px; line-height: 40px; border-bottom: 1px solid #e8e8e8; padding: 0 1em;#menu li a text-decoration: none; color: #333; font-weight: bold; display: block;#menu li:hover background: #CDE2CD;Bây giờ bạn có thể thấy các menu bé trong mục thông tin bị lỗi hiển thị, nên họ sẽ viết thêm CSS mang lại nó như sau.
Xem thêm: Vì Sao Iphone 5S Mất Loa Ngoài? Giải Pháp Sửa Chữa Hiệu Quả Nhất
Trước tiên là bạn hãy đưa thằng #menu li về hiển thị kiểurelative.
#menu ul li position: relative;Và chuyển #menu .sub-menu (menu cung cấp 2) về dạng absolute rồi chỉnh địa điểm hiển thị của chính nó thụt sang trọng bên yêu cầu là 250px (bằng với chiều rộng menu), đồng thời chuyển nó về cạnh bên mép đứng đầu của phần tử mẹ.
#menu .sub-menu position: absolute; left: 250px; top: 0;Kết quả là hiện giờ nó sẽ thụt sang 1 bên rồi.
Ảnh này chưa có thuộc tính top: 0
Bây giờ chỉ việc viết thêm CSS nhằm .sub-menu ẩn đi và hiển thị khi rê chuột vào #menu li có chứa .sub-menu nhé.
#menu .sub-menu position: absolute; left: 250px; top: 0; display: none;#menu li:hover .sub-menu display: block;Kết đúng như dưới.
Đẹp chưa nè? và mình xin nói thêm là đó chỉ là 1 trong menu đơn giản dễ dàng thôi nhưng bạn có nhu cầu làm các menu đẹp hơn vậy thì phải rõ phương pháp làm một menu đơn giản và dễ dàng như vậy, rồi về sau bạn bao gồm thể tham khảo thêm một số tutorial bên trên mạng để gia công theo.
