Cách tạo menu dọc Đa cấp bằng css, cách tạo menu Đa cấp bằng html

     

Mặc dù menu ngang vẫn được sử dụng nhiều hơn nữa nhưng trong khi mình biết có khá nhiều bạn vẫn hy vọng làm các menu hiển thị mẫu mã dọc. Phải ở bài này mình sẽ hướng dẫn qua cho chúng ta một nghệ thuật để tạo nên menu dọc đơn giản nhưng vẫn đẹp mắt.

Bạn đang xem: Cách tạo menu dọc Đa cấp bằng css, cách tạo menu Đa cấp bằng html

Về biện pháp tạo menu dọc thì chúng ta có thể làm y hệt như tạo thực đơn ngang, sẽ 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 phải làm nhiều bước như khi có tác dụng menu ngang.

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

Ban đầu mình sẽ sở hữu một list menu như sau:

Kỹ thuật tạo thành menu dọc cơ phiên bản 15" title=" Kỹ thuật tạo nên menu dọc cơ bản 15">

Trước tiên là thêm CSS mang đến #menu ul để thêm màu nền này nọ một xíu đến đẹp, với nhất là bỏ đi mấy cái dấu chấm đầu chiếc 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 độ cao cho nó cùng 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 thuộc là viết CSS mang lại thẻ a bên phía trong menu, đưa nó qua thành block với thêm những style đề xuất thiết, đồng thời sinh sản thêm cảm giác background khác 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 trái ta gồm thế này:


Kỹ thuật chế tác menu dọc cơ bạn dạng 15" title=" Kỹ thuật tạo ra menu dọc cơ bạn dạng 15">

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

Để kiêng việc thực hiện đến jQuery trong serie CSS cơ bạn dạng này đề xuất mình đã hướng dẫn chúng ta làm một thực đơn dọc tất cả đổ xuống nhưng không tồn tại hiệu ứng mà là nó đã xổ ra bên đề xuất của menu người mẹ khi rê con chuột vào.

Bây giờ các bạn hãy làm lại dòng menu dễ dàng và đơn giản phía bên trên và bổ sung các menu con vào như thế này:


Kỹ thuật sinh sản menu dọc cơ phiên bản 15" title=" Kỹ thuật chế tác menu dọc cơ bản 15">

Và áp dụng lại CSS tại đoạ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: Vi Tính Bảo An, Cửa Hàng Trực Tuyến, Tìm Kiếm Sản Phẩm

Trước tiên là các bạn hãy đưa thằng #menu li về hiển thị kiểurelative.

#menu ul li position: relative;Và đưa #menu .sub-menu (menu cấp cho 2) về dạng absolute rồi chỉnh địa điểm hiển thị của nó thụt sang trọng bên bắt buộc là 250px (bằng cùng với chiều rộng lớn menu), đồng thời chuyển nó về ngay cạnh mép đứng đầu của bộ phận mẹ.


Kỹ thuật tạo ra menu dọc cơ bản 15" title=" Kỹ thuật tạo menu dọc cơ phiên bản 15">
#menu .sub-menu position: absolute; left: 250px; top: 0;Kết trái là bây giờ nó đã thụt qua 1 bên rồi.


*
Kỹ thuật tạo thành menu dọc cơ phiên bản 19">

Ảnh này chưa có thuộc tính top: 0


Bây giờ chỉ cần viết thêm CSS để .sub-menu ẩn đi và hiện ra khi rê chuột vào #menu li có cất .sub-menu nhé.

#menu .sub-menu position: absolute; left: 250px; top: 0; display: none;#menu li:hover .sub-menu display: block;Kết đúng thật dưới.


Đẹp chưa nè? với mình xin nói thêm là đó chỉ là 1 trong menu đơn giản thôi nhưng bạn muốn làm những menu đẹp hơn vậy thì phải rõ bí quyết làm một menu dễ dàng và đơn giản như vậy, rồi về sau bạn tất cả thể tham khảo thêm một số tutorial bên trên mạng để triển khai theo.


Xem tiếp bài bác trong seriePhần trước: Kỹ thuật tạo menu ngang cơ bảnPhần kế tiếp: thực hành tạo layout 1-1 giản
Thạch Phạm

Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe cùng viết thuê trên jdomain.vn. Sở thích nghiên cứu và phân tích về website, DevOps, SysAdmin với xăm bản thân nữa.Phương châm sống của nhỏ nhắn là "No Pain, No Gain".


Chuyên mục: Domain Hosting