Tạo Menu Dropdown Đơn Giản Với CSS

Chào mừng bạn đến với bài viết hướng dẫn chi tiết cách tạo menu dropdown bằng CSS! Menu dropdown là một thành phần giao diện người dùng (UI - User Interface) phổ biến, cho phép người dùng truy cập các tùy chọn hoặc trang con một cách dễ dàng và trực quan. Trong bài viết này, chúng ta sẽ khám phá các phương pháp khác nhau để tạo menu dropdown, từ những kỹ thuật cơ bản đến nâng cao, sử dụng hoàn toàn CSS. Chúng ta sẽ tập trung vào việc tạo ra các menu dropdown đáp ứng (responsive), dễ tùy chỉnh và tương thích với nhiều trình duyệt khác nhau. Mục tiêu là cung cấp cho bạn kiến thức và kỹ năng cần thiết để tự tin xây dựng menu dropdown cho bất kỳ dự án web nào của bạn.

Giới thiệu về Menu Dropdown và CSS

Menu dropdown, hay còn gọi là menu thả xuống, là một danh sách các tùy chọn được ẩn đi và chỉ hiển thị khi người dùng tương tác (ví dụ: di chuột qua hoặc nhấp vào một mục menu chính). Chúng giúp tiết kiệm không gian trên trang web và cung cấp một cách tổ chức nội dung hiệu quả, đặc biệt là khi có nhiều tùy chọn điều hướng. CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để định kiểu và bố cục cho các trang web. Với CSS, chúng ta có thể kiểm soát mọi khía cạnh của menu dropdown, từ màu sắc, phông chữ, kích thước đến hiệu ứng chuyển động và khả năng đáp ứng.

Trước khi bắt đầu, hãy đảm bảo rằng bạn đã có kiến thức cơ bản về HTML và CSS. HTML được sử dụng để cấu trúc nội dung của menu, trong khi CSS được sử dụng để định kiểu và kiểm soát hành vi của nó. Chúng ta sẽ sử dụng các thuộc tính CSS như display, position, visibility, opacity và transform để tạo ra hiệu ứng dropdown mượt mà và trực quan. Ngoài ra, chúng ta cũng sẽ xem xét các kỹ thuật để làm cho menu dropdown đáp ứng với các kích thước màn hình khác nhau, đảm bảo trải nghiệm người dùng tốt trên cả máy tính để bàn và thiết bị di động.

Phương pháp cơ bản: Sử dụng :hover và display

Phương pháp đơn giản nhất để tạo menu dropdown bằng CSS là sử dụng pseudo-class :hover và thuộc tính display. Pseudo-class :hover được áp dụng khi người dùng di chuột qua một phần tử, cho phép chúng ta thay đổi kiểu dáng của phần tử đó. Thuộc tính display được sử dụng để kiểm soát việc hiển thị một phần tử. Chúng ta sẽ ẩn danh sách dropdown ban đầu bằng cách đặt display: none và sau đó hiển thị nó khi người dùng di chuột qua mục menu chính bằng cách đặt display: block.

HTML Structure (Cấu trúc HTML)

Đầu tiên, chúng ta cần tạo cấu trúc HTML cho menu dropdown. Chúng ta sẽ sử dụng một danh sách không có thứ tự (<ul>) để chứa các mục menu chính và một danh sách lồng nhau bên trong mỗi mục menu chính để chứa các mục dropdown.

<ul class="menu">
    <li>
        <a href="#">Trang chủ</a>
    </li>
    <li>
        <a href="#">Sản phẩm</a>
        <ul class="dropdown">
            <li><a href="#">Sản phẩm 1</a></li>
            <li><a href="#">Sản phẩm 2</a></li>
            <li><a href="#">Sản phẩm 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Dịch vụ</a>
        <ul class="dropdown">
            <li><a href="#">Dịch vụ 1</a></li>
            <li><a href="#">Dịch vụ 2</a></li>
            <li><a href="#">Dịch vụ 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Liên hệ</a>
    </li>
</ul>
    

Trong đoạn mã trên, chúng ta có một danh sách <ul> với class menu, chứa các mục menu chính (<li>). Mỗi mục menu chính có thể chứa một danh sách <ul> con với class dropdown, chứa các mục dropdown. Các thẻ <a> được sử dụng để tạo các liên kết đến các trang khác.

CSS Styling (Định kiểu CSS)

Tiếp theo, chúng ta cần định kiểu CSS cho menu dropdown. Chúng ta sẽ ẩn danh sách dropdown ban đầu, định vị nó tuyệt đối (absolute positioning) và hiển thị nó khi người dùng di chuột qua mục menu chính.

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #333;
    overflow: hidden; /* Để tránh float tràn ra ngoài */
}

.menu li {
    float: left;
}

.menu a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menu a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1; /* Đảm bảo dropdown hiển thị trên các phần tử khác */
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown li {
    float: none; /* Loại bỏ float từ menu chính */
}

.dropdown a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown a:hover {
    background-color: #ddd;
}

/* Hiển thị dropdown khi di chuột qua mục menu cha */
.menu li:hover .dropdown {
    display: block;
}
    

Trong đoạn mã trên, chúng ta định kiểu cho danh sách .menu để loại bỏ dấu chấm đầu dòng, đặt màu nền và sử dụng float: left để các mục menu hiển thị theo hàng ngang. Chúng ta cũng định kiểu cho các liên kết <a> để chúng hiển thị dưới dạng khối (display: block), có màu trắng và được căn giữa. Khi di chuột qua một liên kết, màu nền sẽ thay đổi. Danh sách .dropdown ban đầu được ẩn đi (display: none) và được định vị tuyệt đối (position: absolute) để nó hiển thị bên dưới mục menu chính. Chúng ta sử dụng z-index để đảm bảo rằng dropdown hiển thị trên các phần tử khác. Quan trọng nhất, chúng ta sử dụng .menu li:hover .dropdown { display: block; } để hiển thị dropdown khi người dùng di chuột qua mục menu cha (<li>).

Ưu điểm và nhược điểm

Phương pháp này đơn giản và dễ hiểu, nhưng nó có một số nhược điểm. Thứ nhất, nó chỉ hoạt động khi người dùng di chuột qua mục menu chính. Trên các thiết bị di động, nơi không có khái niệm "hover", menu dropdown sẽ không hoạt động. Thứ hai, hiệu ứng hiển thị và ẩn dropdown có thể không mượt mà. Chúng ta sẽ xem xét các phương pháp khác để khắc phục những hạn chế này.

Sử dụng visibility và opacity cho hiệu ứng mượt mà

Để tạo hiệu ứng dropdown mượt mà hơn, chúng ta có thể sử dụng thuộc tính visibility và opacity thay vì display. Thuộc tính visibility có thể được đặt thành visible hoặc hidden để hiển thị hoặc ẩn một phần tử. Thuộc tính opacity được sử dụng để điều chỉnh độ trong suốt của một phần tử, từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn непрозрачный). Bằng cách kết hợp hai thuộc tính này với transition, chúng ta có thể tạo ra hiệu ứng fade-in và fade-out mượt mà.

CSS Styling (Định kiểu CSS)

Chúng ta sẽ sửa đổi CSS từ ví dụ trước để sử dụng visibility và opacity.

.dropdown {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    transition: visibility 0s, opacity 0.3s linear; /* Thêm transition */
}

.dropdown li {
    float: none;
}

.dropdown a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown a:hover {
    background-color: #ddd;
}

/* Hiển thị dropdown khi di chuột qua mục menu cha */
.menu li:hover .dropdown {
    visibility: visible;
    opacity: 1;
}
    

Trong đoạn mã trên, chúng ta đặt visibility: hidden và opacity: 0 cho danh sách .dropdown ban đầu để ẩn nó. Chúng ta cũng thêm transition: visibility 0s, opacity 0.3s linear; để tạo hiệu ứng chuyển đổi mượt mà cho thuộc tính opacity. Khi người dùng di chuột qua mục menu cha, chúng ta đặt visibility: visible và opacity: 1 để hiển thị dropdown với hiệu ứng fade-in. Lưu ý rằng chúng ta đặt visibility về hidden và visible ngay lập tức (0s) để tránh khoảng trống không mong muốn khi opacity chuyển đổi.

Ưu điểm và nhược điểm

Phương pháp này tạo ra hiệu ứng dropdown mượt mà hơn so với phương pháp sử dụng display. Tuy nhiên, nó vẫn có hạn chế là không hoạt động trên các thiết bị di động. Ngoài ra, nó có thể gây ra một số vấn đề về hiệu suất, đặc biệt là trên các trình duyệt cũ.

Tạo Menu Dropdown Đáp Ứng (Responsive)

Để tạo menu dropdown đáp ứng, chúng ta cần sử dụng media queries (truy vấn phương tiện) để điều chỉnh kiểu dáng của menu dựa trên kích thước màn hình. Chúng ta sẽ ẩn menu dropdown trên các thiết bị di động và hiển thị một nút "menu" để người dùng có thể nhấp vào để mở và đóng menu.

HTML Structure (Cấu trúc HTML)

Chúng ta sẽ thêm một nút "menu" vào cấu trúc HTML.

<div class="menu-toggle">
    <button>Menu</button>
</div>

<ul class="menu">
    <li>
        <a href="#">Trang chủ</a>
    </li>
    <li>
        <a href="#">Sản phẩm</a>
        <ul class="dropdown">
            <li><a href="#">Sản phẩm 1</a></li>
            <li><a href="#">Sản phẩm 2</a></li>
            <li><a href="#">Sản phẩm 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Dịch vụ</a>
        <ul class="dropdown">
            <li><a href="#">Dịch vụ 1</a></li>
            <li><a href="#">Dịch vụ 2</a></li>
            <li><a href="#">Dịch vụ 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Liên hệ</a>
    </li>
</ul>
    

Chúng ta đã thêm một <div> với class menu-toggle chứa một nút <button>. Nút này sẽ được sử dụng để mở và đóng menu trên các thiết bị di động.

CSS Styling (Định kiểu CSS)

Chúng ta sẽ sử dụng media queries để ẩn menu và hiển thị nút "menu" trên các thiết bị di động.

/* Ẩn nút "menu" trên màn hình lớn */
.menu-toggle {
    display: none;
}

/* Media query cho màn hình nhỏ (ví dụ: dưới 768px) */
@media (max-width: 768px) {
    .menu {
        display: none; /* Ẩn menu */
        flex-direction: column; /* Hiển thị các mục menu theo chiều dọc */
    }

    .menu li {
        float: none; /* Loại bỏ float */
        text-align: center; /* Căn giữa văn bản */
    }

    .menu-toggle {
        display: block; /* Hiển thị nút "menu" */
        text-align: right; /* Căn phải nút "menu" */
        padding: 10px;
    }

    .dropdown {
        position: static; /* Đặt vị trí tĩnh */
        box-shadow: none; /* Loại bỏ box-shadow */
        display: none; /* Ẩn dropdown ban đầu */
    }

    .menu li:hover .dropdown {
        display: none; /* Ẩn dropdown khi hover */
    }
}
    

Trong đoạn mã trên, chúng ta ẩn nút .menu-toggle trên màn hình lớn. Sau đó, chúng ta sử dụng media query @media (max-width: 768px) để áp dụng các kiểu dáng khác nhau trên màn hình nhỏ. Chúng ta ẩn menu (display: none), hiển thị các mục menu theo chiều dọc (flex-direction: column), loại bỏ float và căn giữa văn bản. Chúng ta hiển thị nút .menu-toggle và căn phải nó. Cuối cùng, chúng ta đặt vị trí của .dropdown thành static, loại bỏ box-shadow và ẩn nó ban đầu. Chúng ta cũng ẩn dropdown khi hover trên thiết bị di động.

JavaScript (JavaScript)

Để làm cho nút "menu" hoạt động, chúng ta cần sử dụng JavaScript để thêm và loại bỏ một class từ menu khi người dùng nhấp vào nút.

<script>
    const menuToggle = document.querySelector('.menu-toggle button');
    const menu = document.querySelector('.menu');

    menuToggle.addEventListener('click', () => {
        menu.classList.toggle('active');
    });
</script>
    

Trong đoạn mã trên, chúng ta lấy tham chiếu đến nút .menu-toggle button và menu .menu. Chúng ta thêm một trình xử lý sự kiện (event handler) cho sự kiện click trên nút. Khi nút được nhấp vào, chúng ta sử dụng classList.toggle('active') để thêm hoặc loại bỏ class active từ menu. Chúng ta cũng cần thêm một số CSS để định kiểu cho menu khi class active được thêm vào.

/* Hiển thị menu khi có class "active" */
.menu.active {
    display: flex !important;
}
    

Bây giờ, khi người dùng nhấp vào nút "menu" trên thiết bị di động, menu sẽ hiển thị hoặc ẩn đi. Chúng ta sử dụng !important để ghi đè thuộc tính display: none từ media query.

Ưu điểm và nhược điểm

Phương pháp này tạo ra một menu dropdown đáp ứng hoạt động tốt trên cả máy tính để bàn và thiết bị di động. Tuy nhiên, nó đòi hỏi một chút JavaScript để làm cho nút "menu" hoạt động. Ngoài ra, nó có thể phức tạp hơn so với các phương pháp đơn giản hơn.

Sử dụng Framework CSS (CSS Framework)

Một cách khác để tạo menu dropdown là sử dụng một framework CSS như Bootstrap hoặc Foundation. Các framework này cung cấp các thành phần giao diện người dùng được xây dựng sẵn, bao gồm cả menu dropdown, giúp bạn tiết kiệm thời gian và công sức. Bootstrap là một trong những framework CSS phổ biến nhất, cung cấp một loạt các thành phần và kiểu dáng được thiết kế sẵn.

Bootstrap Dropdown (Dropdown của Bootstrap)

Để sử dụng dropdown của Bootstrap, bạn cần bao gồm các tệp CSS và JavaScript của Bootstrap trong dự án của mình. Sau đó, bạn có thể sử dụng các class của Bootstrap để tạo menu dropdown.

HTML Structure (Cấu trúc HTML)

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>
    

Trong đoạn mã trên, chúng ta sử dụng các class của Bootstrap như dropdown, btn, btn-secondary, dropdown-toggle và dropdown-menu để tạo menu dropdown. Thuộc tính data-toggle="dropdown" được sử dụng để kích hoạt chức năng dropdown của Bootstrap.

Ưu điểm và nhược điểm

Sử dụng framework CSS giúp bạn tạo menu dropdown nhanh chóng và dễ dàng. Tuy nhiên, nó cũng có một số nhược điểm. Thứ nhất, bạn cần bao gồm các tệp CSS và JavaScript của framework trong dự án của mình, điều này có thể làm tăng kích thước tệp. Thứ hai, bạn có thể bị giới hạn bởi các kiểu dáng và thành phần được cung cấp bởi framework. Nếu bạn muốn tùy chỉnh menu dropdown, bạn có thể cần phải ghi đè các kiểu dáng mặc định của framework.

Kết luận

Trong bài viết này, chúng ta đã khám phá các phương pháp khác nhau để tạo menu dropdown bằng CSS. Chúng ta đã bắt đầu với phương pháp cơ bản sử dụng :hover và display, sau đó chuyển sang sử dụng visibility và opacity để tạo hiệu ứng mượt mà hơn. Chúng ta cũng đã xem xét cách tạo menu dropdown đáp ứng bằng cách sử dụng media queries và JavaScript. Cuối cùng, chúng ta đã tìm hiểu cách sử dụng framework CSS như Bootstrap để tạo menu dropdown nhanh chóng và dễ dàng. Hy vọng rằng bài viết này đã cung cấp cho bạn kiến thức và kỹ năng cần thiết để tự tin xây dựng menu dropdown cho bất kỳ dự án web nào của bạn. Hãy nhớ rằng, việc lựa chọn phương pháp phù hợp phụ thuộc vào yêu cầu cụ thể của dự án và trình độ kỹ năng của bạn. Chúc bạn thành công!