Cách tạo menu xổ dọc trong HTML mới nhất 2020

Menu xổ dọc là một trong những menu hay được mọi người sử dụng khi làm website ưu điểm nó sẽ ít chiếm diện tích của trang. Để biết cách tạo menu xổ dọc trong HTML thì cũng khá là đơn giản các bạn có thể làm theo hướng dẫn của bài viết này để biết được cách tạo menu xổ dọc trong HTML. Trong bài viết này, lamweb.vn sẽ viết bài viết  Cách tạo menu xổ dọc trong html mới nhất 2020.

Cách tạo menu xổ dọc trong html mới nhất 2020

Mặc dù menu ngang vẫn được dùng nhiều hơn nhưng ngoài ra mình biết có rất nhiều bạn vẫn mong muốn làm các menu hiển thị kiểu dọc. Nên ở bài này mình sẽ tut qua cho các bạn một kỹ thuật để tạo thực đơn dọc không khó khăn nhưng luôn luôn đẹp đẽ.

Về mẹo tạo thực đơn dọc thì chúng ta có thể làm như tạo menu ngang, đó là tạo một cái danh mục với

• Rồi xóa list-style-type cho các thẻ
• Bên trong là được chứ không cần làm nhiều bước giống như khi sử dụng thực đơn ngang.
  

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

  Ban đầu mình sẽ có một danh sách menu như sau:

  01 02 03 04 05 06 07 08

  <div id="menu"> <ul> <li><a href="#">Trang chủa>li> <li><a href="#">Tin tứca>li> <li><a href="#">Sản phẩma>li> <li><a href="#">Liên hệa>li> ul> div>

  Trước tiên là thêm CSS cho #menu ul để thêm màu nền này nọ một xíu cho đẹp, và nhất là bỏ đi mấy cái dấu chấm đầu định dạng của danh sách..

  01 02 03 04 05 06 07

  #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.

  01 02 03 04 05 06 07

  #menu li width: tự động; height: 40px; line-height: 40px; border-bottom: 1px solid #e8e8e8; padding: 0 1em;

  Cuối cùng là vạch CSS cho thẻ a bên trong thực đơn, chuyển nó qua thành block và thêm các phong cách quan trọng, cùng lúc tạo thêm hiệu ứng background khác khi rê chuột vào mục menu.

  01 02 03 04 05 06 07 08 09

  #menu li a text-decoration: none; color: #333; font-weight: bold; display: block; #menu li:hover background: #CDE2CD;

  Kết quả ta có thế này:

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

  Để tránh việc sử dụng đến jQuery trong serie CSS cơ bản này nên mình sẽ tut bạn làm một thực đơn dọc có đổ xuống nhưng k có hiệu ứng mà là nó sẽ xổ ra bên phải của menu mẹ khi rê chuột vào.

  Ngày nay bạn hãy sử dụng lại cái thực đơn dễ dàng phía trên và bổ sung các menu con vào như thế này:

  01 02 03 04 05 06 07 08 09 10 11 12 13 14

  <div id="menu"> <ul> <li><a href="#">Trang chủa>li> <li><a href="#">Tin tứca> <ul class="sub-menu"> <li><a href="#">WordPressa>li> <li><a href="#"><a href="https://thachpham.com/category/seo" data-wpel-link="internal">SEOa>a>li> <li><a href="#">Hostinga>li> ul> li> <li><a href="#">Sản phẩma>li> <li><a href="#">Liên hệa>li> ul> div>

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

  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

  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 đủ sức thấy các thực đơn con trong mục Tin tức bị lỗi hiển thị, nên chúng ta sẽ vạch thêm CSS cho nó giống như sau.

  Trước nhất là bạn hãy mang thằng #menu li về hiển thị kiểurelative.

  01 02 03

  #menu ul li position: relative;

  Và chuyển #menu .sub-menu (menu cấp 2) về dạng absolute rồi chỉnh vị trí hiển thị của nó thụt sang bên phải là 250px (bằng với chiều rộng menu), cùng lúc mang nó về sát mép top của phần tử mẹ.

  01 02 03 04 05

  #menu .sub-menu position: absolute; left: 250px; top: 0;

  Hiệu quả là bây giờ nó vừa mới thụt qua một bên rồi.

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

  >>> Hướng dẫn cách tạo menu bán hàng trong word đơn giản nhất 2020

  Hiện nay 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ó chứa .sub-menu nhé.

  01 02 03 04 05 06 07 08 09

  #menu .sub-menu position: absolute; left: 250px; top: 0; display: none; #menu li:hover .sub-menu display: block;

  

  Và mình xin nói thêm là đó chỉ là một thực đơn dễ dàng thôi nhưng bạn muốn làm các menu đẹp hơn thì phải rõ phương pháp sử dụng một menu đơn giản giống như vậy, rồi sau này bạn đủ sức xem qua thêm một số tutorial trên mạng để sử dụng theo.

  Xem thêm: Hướng dẫn cách làm menu thực đơn sáng tạo nhất 2020

Nguồn : https://thachpham.com