Tidadigi Logo

CSS DropDowns

Menu dropdown rất quan trọng cho các website tương tác cho phép người dùng truy cập nhiều liên kết. Sử dụng CSS bạn có thể thiết kế menu dropdown đẹp và hữu ích. Bài viết này sẽ trình bày các loại dropdown và cách triển khai nó bằng CSS.

Basic Dropdown Structure

Một dropdown thường gồm một danh sách lồng nhau trong một danh sách không thứ tự (<ul>) sử dụng thẻ list (<li>) để tạo cấu trúc. Các thuộc tính CSS làm cho các phần tử này trở nên sống động. Nhờ đó, dropdown trở nên tương tác và hấp dẫn về mặt thị giác.

html 
<!DOCTYPE html>
<html>

<head>
    <title>Dropdown property</title>
</head>

<body>
    <nav>
        <ul>
            <li class="Lev-1">
                <a href="">Level-1</a>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

</html>

Output:

css-dropdowns

Adding CSS to Basic Dropdown HTML Structure

html 
<!DOCTYPE html>
<html>

<head>
    <title>Navigation property</title>
    <style>
        a {
            color: white;
            background-color: #990;
            text-decoration: none;
        }

        nav {
            background: #333;
        }

        nav>ul {
            margin: 0 auto;
            width: 80px;
        }

        nav ul li {
            display: block;
            float: left;
            margin-left: -40px;
            position: relative;
        }

        nav ul a {
            display: block;
            float: left;
            width: 150px;
            padding: 10px 20px;
        }

        nav ul a:hover {
            background: #090;
        }

        nav ul li ul li {
            float: none;
        }

        nav ul li ul {
            display: none;
            position: absolute;
            background: #333;
            top: 42px;
        }

        nav ul li:hover>ul {
            display: block;
        }

        nav ul li a {
            display: block;
        }

        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: #009900;
            Text-align: center;
        }

        p {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="gfg">GeeksforGeeks</div>
    <p>Dropdown Navigation property</p>
    <nav>
        <ul>
            <li class="Lev-1">
                <a href="">Level-1</a>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

</html>

Output:

css-dropdowns

Đoạn code trên tạo ra một kết quả đầu ra dựa trên cấu trúc dropdown. Các phần quan trọng của code HTML được thảo luận dưới đây.

  • Nav là vùng chứa ngoài cùng
  • nav ul li ul li - float được đặt thành none để giữ nguyên khi di chuột qua.
  • Sử dụng relative position để li di chuyển hoặc thay đổi vị trí tương ứng với thành phần của nó.
  • Sử dụng '>' sau hover để xem hiệu ứng hover trên ul liền kề của li.

Right-Aligned Dropdown

Dropdown căn phải đặt nội dung menu dropdown ở bên phải màn hình bằng cách đặt thuộc tính float thành right. Cách bố trí này hữu ích cho các thanh điều hướng. Chúng cần căn chỉnh các tùy chọn ở bên phải màn hình.

Example: Right-Aligned Dropdown

Bằng cách đặt thuộc tính float thành right trong CSS menu dropdown tự động căn chỉnh sang phải. Nó cung cấp một giao diện rõ ràng và có tổ chức.

html 
<!DOCTYPE html>
<html>

<head>
    <title>right-aligned dropdown content property</title>
    <style>
        #drop {
            background-color: teal;
            color: white;
            padding: 10px;
            font-size: 16px;
            width: : 200px;
            height: : 60px;
            border-radius: 5px;
            font-size: 20px;
        }

        #drop-down {
            position: relative;
            display: inline-block;
        }

        #dropdown-menu {
            display: none;
            position: absolute;
            background-color: #666;
            width: 160px;
            margin-left: -45px;
            border-radius: 5px;
            z-index: 1;
        }

        #dropdown-menu a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: #009900;
            Text-align: center;
        }

        p {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

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

        #drop-down:hover #dropdown-menu {
            display: block;
        }
    </style>
</head>

<body>
    <div class="gfg">GeeksforGeeks</div>
    <p>Right-aligned Dropdown content property</p>
    <div id="drop-down" 
         style=" float: right; 
                 margin-right: 70px;">
        <button id="drop">DropDown</button>
        <div id="dropdown-menu">
            <a href="">Item 1</a>
            <a href="">Item 2</a>
            <a href="">Item 3</a>
            <a href="">Item 4</a>
        </div>
    </div>
</body>

</html>

Output:

css-dropdowns

Image Dropdown

Một image dropdown phóng to hình ảnh khi di chuột qua cung cấp hiệu ứng zoom. Hiệu ứng này yêu cầu CSS cơ bản để kiểm soát trạng thái hiển thị và hover. Nó đặc biệt hữu ích cho danh mục đầu tư giới thiệu sản phẩm và bộ sưu tập ảnh.

Example: Image Dropdown

Khi người dùng di chuột qua ảnh nó sẽ phóng to tạo ra hiệu ứng thị giác hấp dẫn. Điều này có thể làm nổi bật những hình ảnh quan trọng trên trang web của bạn.

html 
<!DOCTYPE html>
<html>

<head>
    <title>Image Dropdown</title>
    <style>
        .dropmenu {
            position: relative;
            display: inline-block;
            margin-left: 150px;
        }

        .sub-dropmenu {
            display: none;
            position: absolute;
        }

        .dropmenu:hover .sub-dropmenu {
            display: block;
        }

        .enlarge {
            padding: 15px;
            text-align: center;
        }

        .gfg {
            margin-left: 40px;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="gfg">Image Dropdown property</div>
    <div class="dropmenu">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/temp1.png" 
             width="150" 
             height="50" align="middle">
        <div class="sub-dropmenu">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/temp1.png" 
                 width="600" 
                 height="200">
        </div>
    </div>
</body>

</html>

Output:

css-dropdowns

Clicked Dropdowns

Clicked dropdowns yêu cầu JavaScript để bật tắt hiển thị nội dung dropdown khi nút được nhấp vào. Loại dropdown này thân thiện với người dùng và đảm bảo nội dung menu chỉ hiển thị khi cần.

Example: Clicked Dropdown

Triển khai clicked dropdown bao gồm thêm một hàm JavaScript để mở rộng và thu gọn menu. Cách tiếp cận này tăng cường khả năng sử dụng đặc biệt trên các thiết bị di động.

html 
<!DOCTYPE html>
<html>

<head>
    <title>clicked dropdown</title>
    <style type="text/css">
        button {
            background: #009900;
            width: 200px;
            height: 60px;
            color: white;
            border: 1px solid #fff;
            font-size: 20px;
            border-radius: 5px;

        }

        ul li {
            list-style: none;
        }

        ul li a {
            display: block;
            background: #c99;
            width: 200px;
            height: 50px;
            text-decoration: none;
            text-align: center;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            color: white;
            font-size: 25px;
        }

        ul li a {
            text-decoration: none;
        }

        ul li a:hover {
            background: #009900;
        }

        .open {
            display: none;
        }

        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: #009900;
            Text-align: center;
        }

        p {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function open_menu() {
            let clicked = document.getElementById('drop-menu');
            if (clicked.style.display == 'block') {
                clicked.style.display = 'none';
            }
            else {
                clicked.style.display = 'block';
            }
        }
    </script>
</head>

<body>
    <div class="gfg">GeeksforGeeks</div>
    <p>Clicked Dropdown content property</p>
    <div id="dropdown">
        <button onclick="open_menu()">Click Me!</button>
        <div class="open" id="drop-menu">
            <ul>
                <li><a href="">Item-1</a></li>
                <li><a href="">Item-2</a></li>
                <li><a href="">Item-3</a></li>
                <li><a href="">Item-4</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

Output:

css-dropdowns

Interactive Dropdown

Để tạo một interactive dropdown hãy áp dụng các kiểu CSS cho cấu trúc cơ bản. Điều này bao gồm tạo kiểu cho vùng chứa nav các mục danh sách và các liên kết. Thêm hiệu ứng hover để hiển thị menu dropdown.

Example: Interactive Dropdown

Interactive dropdowns làm cho menu điều hướng trở nên năng động và hấp dẫn hơn. Bằng cách sử dụng hiệu ứng CSS hover menu dropdown có thể xuất hiện mượt mà. Điều này giúp tăng cường trải nghiệm người dùng.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Navigation Property</title>
    <style>
        a {
            color: white;
            background-color: #990;
            text-decoration: none;
        }

        nav {
            background: #333;
        }

        nav>ul {
            margin: 0 auto;
            width: 80px;
        }

        nav ul li {
            display: block;
            float: left;
            margin-left: -40px;
            position: relative;
        }

        nav ul a {
            display: block;
            float: left;
            width: 150px;
            padding: 10px 20px;
        }

        nav ul a:hover {
            background: #090;
        }

        nav ul li ul li {
            float: none;
        }

        nav ul li ul {
            display: none;
            position: absolute;
            background: #333;
            top: 42px;
        }

        nav ul li:hover>ul {
            display: block;
        }

        nav ul li a {
            display: block;
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li class="Lev-1">
                <a href="#">Level-1</a>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>

</html>

Output:

css-dropdowns
Interactive Dropdown

Note: Một số điểm nổi bật quan trọng của code.

  • Hàm javascript sẽ mở rộng và thu gọn menu khi nút "Click Me" được nhấp.
  • Chúng ta sử dụng onclick để gọi hàm javascript trong thẻ button.

Bằng cách hiểu và triển khai các thuộc tính CSS bạn có thể tạo menu dropdown tương tác. Bạn có thể tạo menu dropdown đẹp mắt và thân thiện với người dùng. Từ cấu trúc cơ bản đến tương tác nâng cao như clicked dropdowns và image enlargements. Việc nắm vững các kỹ thuật này sẽ nâng cao tính năng và giao diện trang web của bạn.


Last Updated : 21/07/2025