Hướng dẫn tạo menu dọc bằng css

Mặc mặc dù menu ngang vẫn được áp dụng nhiều hơn nữa cơ mà ngoài ra mình biết có không ít chúng ta vẫn mong có tác dụng những thực đơn hiển thị kiểu dọc. Nên sinh sống bài này bản thân đã khuyên bảo qua cho chúng ta một chuyên môn để tạo ra thực đơn dọc dễ dàng và đơn giản nhưng lại vẫn ưa nhìn.

Bạn đang xem: Hướng dẫn tạo menu dọc bằng css

Về phương pháp tạo nên thực đơn dọc thì bạn cũng có thể làm giống như chế tạo thực đơn ngang, chính là sản xuất một chiếc danh sách cùng với  rồi xóa list-style-type cho những thẻ  bên phía trong là được chứ không phải làm cho các bước như khi làm cho thực đơn ngang.

Tạo thực đơn dọc cơ bản

Ban đầu bản thân sẽ có được một list menu nhỏng sau:

Trước hết là thêm CSS cho #thực đơn ul nhằm thêm màu nền này nọ một chút đến rất đẹp, cùng nhất là loại bỏ mấy mẫu lốt chnóng đầu mẫu của list..

#menu ul background: #8AD385; width: 250px; padding: 0; list-style-type: none; text-align: left;Sau kia viết CSS cho các thẻ  nhằm thêm chiều cao mang đến nó cùng với height và thêm line-height bởi cùng với độ 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 thuộc là viết CSS đến thẻ a bên phía trong menu, đưa nó qua thành block cùng thêm các style quan trọng, bên cạnh đó chế tạo ra 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;#thực đơn li:hover background: #CDE2CD;Kết quả ta tất cả nắm này:

Tạo thực đơn dọc gồm đổ xuống (dropdown)

Để tách vấn đề sử dụng mang lại jQuery trong serie CSS cơ bạn dạng này cần mình đã lí giải bạn làm một thực đơn dọc bao gồm đổ xuống nhưng mà không có cảm giác mà lại là nó đã xổ ra mặt đề nghị của menu bà bầu Khi rê con chuột vào.

Bây giờ đồng hồ các bạn hãy làm cho lại cái menu dễ dàng phía trên với bổ sung những menu bé vào như thế này:


Tin tức

Và sử dụng lại CSS ở chỗ trên:

toàn thân 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;#thực đơn li:hover background: #CDE2CD;Bây giờ bạn có thể thấy các menu con vào mục Tin tức bị lỗi hiển thị, đề xuất họ đã viết thêm CSS mang đến nó nhỏng sau.

Xem thêm: Cách Làm Mứt Cà Rốt Ngon, Dẻo Thơm Mà Đơn Giản Đón Tết Thêm May Mắn

Đầu tiên là bạn hãy gửi thằng #thực đơn li về hiển thị kiểurelative sầu.

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

#thực đơn .sub-menu position: absolute; left: 250px; top: 0;Kết quả là hiện nay nó đã thụt sang 1 mặt rồi.


*
Kỹ thuật tạo nên menu dọc cơ bạn dạng 104">

Hình ảnh này chưa xuất hiện nằm trong tính top: 0


Bây giờ đồng hồ chỉ cần viết thêm CSS để .sub-menu ẩn đi với chỉ ra lúc rê loài chuột vào #thực đơn li gồm chứa .sub-menu nhé.

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

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