Thẻ lưu trữ: menu xổ xuống

drop-down-menu-css

Làm menu xổ xuống(drop-down menu) bằng css và html

Menu là một thành phần không thể thiếu của website. Việc xây dựng một hệ thống menu hợp lý và dễ sử dụng không hề đơn giản, nhất là những website có hệ thống đa cấp và phức tạp. Menu xổ xuống(drop-down menu) là sự lựa chọn hàng đầu cho những website này. Sau đây là phần hướng dẫn tạo một menu đa cấp chỉ dùng css và html, tinh chỉnh gọn nhẹ và dễ sử dụng.

drop-down-menu

Để có được một hệ thống menu đa cấp như trên, bạn có thể thực hiện theo các bước như sau:

  1.  Tạo một hệ thống menu HTML:
    Thường thì trong lập trình, hệ thống menu html sẽ tự sinh ra, sau đây là đoạn html mô phỏng cho một menu đa cấp

    <div>
          <ul>
            <li>
                <a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Menu 1 - Lv2</a>
                        <ul>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 1 - Lv2</a>
                        <ul>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                            <li><a href="#">Menu 1 - Lv3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                    <li><a href="#">Menu 1 - Lv2</a></li>
                </ul>
            </li>
       </ul>
    </div>
  2. CSS cho menu:
    <style type="text/css">
    .menu
    {
        width:70%; 
        height:30px; 
        line-height:30px;
        margin:0 auto;
    }
    .menu li
    {
        position:relative;
        display:inline-block;
        width:100%;
    }
    .menu li ul
    {
        position:absolute; 
        display:none;
    }
    .menu li:hover > ul
    {
        display:block;
    }
    .menu a
    {
        display:block; 
        color:#fff;
        background:#606c88;
    }
    .menu ul ul,
    .menu li:hover > a,
    .menu a:hover
    {
        opacity:.8;
    }
    /*Level 1*/
    .menu > ul > li
    {
        float:left;
        width:24%;
    }
    .menu > ul > li > a
    {
        width:94%;
        padding-left:3%; 
        padding-right:3%; 
        text-transform:uppercase; 
        font-weight:bold;
    }
    /*Level 2*/
    .menu > ul > li > ul
    {
        position:absolute; 
        top:100%; 
        left:0; 
        width:100%; 
    }
    .menu > ul > li > ul > li
    {
        width:100%;
    }
    .menu > ul > li > ul > li > a
    {
        width:94%;
        padding-left:3%;
        padding-right:3%;
    }
    /* Level +++ */
    .menu ul ul ul
    {
        width:100%;
        left:100%;
        top:0;
        background:#a1b1d4;
    }
    .menu ul ul ul li
    {
        width:100%;
    }
    .menu ul ul ul li a
    {
        width:94%;
        padding-left:3%;
        padding-right:3%;
    }
    
    </style>

    Code CSS sử dụng % làm đơn vị, vì vậy menu sẽ tự co giãn theo chiều rộng của website. Bạn có thể quy định cụ thể chiều rộng bằng cách  set chiều rộng cụ thể cho menu.

Bạn có thể sử dụng file demo để làm mẫu cho việc xây dựng menu cho website của mình. Bạn có thể sử dụng jQuery để tạo hiệu ứng cho menu trở nên mượt hơn, bài viết này hướng dẫn bạn sử dụng Css để tạo menu, vì vậy phần hướng dẫn sử dụng jQuery tạo hiệu ứng cho menu xin vui lòng xem hướng dẫn ở một bài viết khác.