Tạo menu dọc đa cấp bằng css

      62

Mặc mặc dù menu ngang vẫn được áp dụng nhiều hơn dẫu vậy không chỉ có thế mình biết có tương đối nhiều các bạn vẫn ý muốn làm những menu hiển thị phong cách dọc. Nên sinh sống bài bác này bản thân vẫn trả lời qua mang đến chúng ta một nghệ thuật để tạo thực đơn dọc đơn giản và dễ dàng nhưng vẫn ưa nhìn.

Bạn đang xem: Tạo menu dọc đa cấp bằng css

Về cách tạo thành menu dọc thì bạn có thể có tác dụng y như tạo thành menu ngang, chính là chế tạo một chiếc danh sách với  rồi xóa list-style-type cho những thẻ  bên phía trong là được chứ không cần có tác dụng các bước nhỏng lúc làm cho thực đơn ngang.

Tạo menu dọc cơ bản

Ban đầu bản thân sẽ có được một danh sách menu nlỗi sau:

trước hết là thêm CSS cho #menu ul để thêm màu sắc nền này nọ một xíu cho rất đẹp, với độc nhất là vứt đi mấy chiếc vệt chấm đầu loại của list..

#thực đơn ul background: #8AD385; width: 250px; padding: 0; list-style-type: none; text-align: left;Sau kia viết CSS cho những thẻ  để thêm chiều cao mang lại nó cùng với height với thêm line-height bởi với độ cao nhằm nó đứng thân bloông xã.

#thực đơn li width: auto; height: 40px; line-height: 40px; border-bottom: 1px solid #e8e8e8; padding: 0 1em;Cuối cùng là viết CSS cho thẻ a phía bên trong thực đơn, chuyển nó qua thành block cùng thêm các style quan trọng, bên cạnh đó sản xuất thêm cảm giác background khác Lúc rê chuột vào mục thực đơn.

#menu li a text-decoration: none; color: #333; font-weight: bold; display: block;#menu li:hover background: #CDE2CD;Kết trái ta bao gồm cố kỉnh này:

Tạo menu dọc bao gồm đổ xuống (dropdown)

Để tránh Việc áp dụng cho jQuery trong serie CSS cơ phiên bản này cần bản thân đã khuyên bảo 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à nó sẽ xổ ra bên yêu cầu của menu chị em Lúc rê loài chuột vào.

Bây giờ đồng hồ bạn hãy làm lại mẫu thực đơn đơn giản dễ dàng phía bên trên với bổ sung cập nhật các thực đơn bé vào như vậy này:


Tin tức

Và áp dụng lại CSS ở phần trên:

body font-family: sans-serif; font-size: 15px;#thực đơn 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;#thực đơn li:hover background: #CDE2CD;Bây tiếng bạn có thể thấy các menu bé trong mục Tin tức bị lỗi hiển thị, yêu cầu chúng ta đã viết thêm CSS cho nó nhỏng sau.

Xem thêm: Tuyển Nhân Viên Kho Siêu Thị Tại Quận, Tuyển Nhân Viên Kho Siêu Thị

Đầu tiên là bạn hãy đưa thằng #menu li về hiển thị kiểurelative sầu.

#menu ul li position: relative;Và gửi #thực đơn .sub-menu (menu cấp cho 2) về dạng absolute rồi chỉnh địa điểm hiển thị của chính nó thụt thanh lịch mặt đề nghị là 250px (bằng với chiều rộng menu), bên cạnh đó đưa nó về gần kề mép top của thành phần người mẹ.

#menu .sub-thực đơn position: absolute; left: 250px; top: 0;Kết trái là hiện thời nó vẫn thụt sang một mặt rồi.


*
Kỹ thuật sản xuất thực đơn dọc cơ bản 104">

Hình ảnh này chưa tồn tại thuộc tính top: 0


Bây tiếng chỉ việc viết thêm CSS để .sub-menu ẩn đi cùng hiển thị Khi rê loài chuột vào #thực đơn li bao gồm chứa .sub-menu nhé.

#menu .sub-thực đơn position: absolute; left: 250px; top: 0; display: none;#menu li:hover .sub-menu display: block;Kết quả như dưới.

Đẹp không nè? Và mình xin nói thêm là kia chỉ là một trong những thực đơn dễ dàng và đơn giản thôi mà lại bạn có nhu cầu có tác dụng các menu đẹp mắt hơn nữa thì đề xuất rõ cách có tác dụng một menu đơn giản như thế, rồi về sau chúng ta có thể tham khảo thêm một trong những tutorial trên mạng để gia công theo.