drop-down list trong html

Posted on by mtoplistChuyên mục:Top List
  • CSS cơ bản
    • CSS là gì? Hướng dẫn cách học CSS hiệu quả
    • Thẻ DIV trong HTML là gì?
    • Tìm hiểu thẻ SPAN trong HTML
    • Thuộc tính Float và Clear trong CSS
    • Chia cột trong HTML và CSS
    • Thiết kế website bằng HTML và CSS đơn giản
    • Thuộc tính Display trong CSS (inline block)
  • CSS nâng cao
    • Thuộc tính Display Flex trong Css
    • CSS Grid Layout và cách sử dụng
    • @keyframes trong CSS3
    • Hiệu ứng Animation trong CSS3
    • Thuộc tính Transform trong Css3
    • Sử dụng @Media trong CSS để tạo Responsive
    • Hướng dẫn sử dụng Before và After trong CSS
    • Hiệu ứng Animation trong CSS3

  • Home

  • Web Development

  • HTML & CSS

  • Hướng dẫn tạo menu Dropdown bằng CSS chi tiết

Hướng dẫn tạo menu Dropdown bằng CSS chi tiết

–

Cập nhật: 21/07/2021

Chắc chắn rằng menu là thành phần không thể thiếu với mọi trang web. Ở đây người dùng có thể tìm thấy thông tin quan trọng dễ dàng. Bài viết này chia sẻ bạn cách tạo một menu Dropdown bằng CSS cực kỳ dễ dàng.

Nội dung chính

Show

  • Hướng dẫn tạo menu Dropdown bằng CSS chi tiết
  • Các bước tạo menu Dropdown bằng CSS như thế nào?
  • Bình luận! Hủy
  • Đọc thêm
  • Video liên quan

Đối với dạng menu xổ xuống 2 cấp nó sẽ hơi phức tạp hơn so với 1 cấp vì thế khi bạn tìm hiểu nên thực hành với những đoạn code đơn giản. Khi đã hiểu được bạn mới thêm nhiều code CSS hơn để trang trí.

Các bước tạo menu Dropdown bằng CSS như thế nào?

Trong khi xây dựng một trang web mình dám chắc rằng bạn sẽ phải tìm hiểu qua phần này. Cho dù bạn có học lên PHP hay WordPress đi chăng nữa thì các kiến thức về HTML và CSS vẫn là nền tảng xuyên suốt sau này.

Một trong thuộc tính cần lưu ý khi tạo menu đa cấp xổ xuống đó là hover. Khi bạn rê chuột qua một phần tử HTML này đó nó sẽ xuất hiện hiệu ứng theo ý muốn.

Nào bắt đầu nhé!

Đầu tiên bạn sẽ phải tạo danh sách menu với đoạn mã HTML như sau:

<!DOCTYPE html>
<html>
<head>
<style>
/* Mã Css nằm ở đây */
</style>
</head>
<body>
<div class=”menu”>
<ul>
<li><a href=”/”>Thủ thuật</a>
<ul>
<li><a href=”/”>Wordpress</a></li>
<li><a href=”/”>Seo</a></li>
<li><a href=”/”>Photoshop</a></li>
</ul>
</li>
<li><a href=”/”>Lập trình</a>
<ul>
<li><a href=”/”>HTML</a></li>
<li><a href=”/”>CSS</a></li>
<li><a href=”/”>PHP</a></li>
</ul>
</li>
<li><a href=”/”>Marketing</a></li>
<li><a href=”/”>Linh tinh</a></li>
</ul>
</div>
</body>
</html>

  • Thủ thuật
    • WordPress
    • Seo
    • Photoshop
  • Lập trình
    • HTML
    • CSS
    • PHP
  • Marketing
  • Linh tinh

Kết quả khi chưa có CSS sẽ như thế này

drop-down list trong html

Tiếp theo bạn thêm đoạn mã CSS vào thẻ <style></style> trong header

* {margin: 0; padding: 0}
.menu {background: #333;height: 40px}
.menu li{float: left; list-style: none; margin-right: 10px; padding: 10px 5px; width: 120px}
.menu li:hover {background: #222;}
.menu li a{color: #fff; text-decoration: none}
.menu li ul li{display:none; width: 100px ;margin-top: 10px}
.menu li:hover ul li{display: block}

* {margin: 0; padding: 0} .menu {background: #333;height: 40px} .menu li{float: left; list-style: none; margin-right: 10px; padding: 10px 5px; width: 120px} .menu li:hover {background: #222;} .menu li a{color: #fff; text-decoration: none} .menu li ul li{display:none; width: 100px ;margin-top: 10px} .menu li:hover ul li{display: block}

Kết quả khi thêm CSS vào một menu ngang hai cấp đã xuất hiện:

drop-down list trong html

Giải thích:

.menu li ul li{display:none; width: 100px} đoạn này bạn sẽ dùng display: none để ẩn menu cấp 2 đi

.menu li:hover ul li{display: block} đoạn này là khi bạn rê chuột qua phần tử li cấp 1 thì danh sách menu cấp 2 sẽ xổ ra do bạn đặt là dispay: block

Kết luận: Trên đây là bài viết hướng dẫn bạn tạo menu ngang 2 cấp khá đơn giản và dễ hiểu. Chúc bạn học HTML và CSS hiệu quả và đừng quên ghé thăm blog của mình để theo dõi thường xuyên nhiều bài khác để cập nhật thêm nhiều kiến thức bổ ích.

  • Học CSS
  • HTML & CSS

Category:

2 Bình luận Hướng dẫn tạo menu Dropdown bằng CSS chi tiết

  1. Ngô Công Cường

    viết:

    Tháng Sáu 1, 2021 lúc 1:07 sáng

    cảm ơn anh chị QuachQuynh nhiều ạ, bài viết có tâm và có thêm chút hài hước làm em rất vui

    Trả lời

    1. Quách Quỳnh

      viết:

      Tháng Sáu 2, 2021 lúc 2:11 sáng

      Hi Ngô Công Cường!
      Bài viết này có dễ hiểu không bạn?

      Trả lời

Bình luận! Hủy

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *

Bình luận

Tên *

Email *

Trang web

Δ

Đọc thêm

drop-down list trong html

Các thẻ cơ bản trong HTML thường sử dụng

HTML là ngôn ngữ tạo khung xương cho trang web với cú pháp tương đối dễ dàng. Hầu như ai cũng có thể học HTML trong vài ngày nhưng để ứng dụng được cần một

drop-down list trong html

Thuộc tính Border trong CSS

Đường viền Border CSS thường được sử dụng nhiều nhất khi viết code cho website. Nó sẽ có nhiều thuộc tính định dạng đi kèm như border-style, border-width, border-color. Vậy bạn đã biết cách sử

drop-down list trong html

Thuộc tính border-collapse trong CSS

CSS là ngôn ngữ với nhiều thuộc tính phong phú khác nhau. Để nắm hết được cần một thời gian dài. Nhưng đừng lo lằng bởi vì khi đến với blog này bạn sẽ được

drop-down list trong html

Xuống dòng trong HTML bằng thẻ br

Làm thế nào để xuống dòng trong HTML? Nếu bạn đang tìm hiểu về ngôn ngữ HTML chắc chắn không thể bỏ qua thẻ ngắt dòng <br>. Thẻ <br> trong HTML <br> được dùng để

drop-down list trong html

Thuộc tính Float và Clear trong CSS

Khi dàn trang cho trang web bằng HTML và CSS bạn sẽ gặp phải một vấn đề đó là các phần tử nằm chồng chéo lên nhau hoặc không theo ý muốn của bạn. Chính

drop-down list trong html

Thuộc tính text-decoration trong CSS

Lại một thuộc tính làm việc với văn bản có độ thông dụng cao trong CSS. Đó chính là text-decoration. Với người mới tìm hiểu thì mình chắc rằng nó sẽ cực kỳ hữu ích.

mtoplist