Hướng dẫn tạo menu dropdown nhanh bằng css

by 1:45:00 PM 0 nhận xét
Sau đây là hướng dẫn tạo menu dropdown ( Menu đỗ xuống) bằng css đơn giản.


Bước 1: Tạo một file html tạm đặt tên là menu.html với nội dung sau:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <ul id="menu">
        <li>
            <a href="#">Menu 1</a>
        </li>
        <li><a href="#">Menu 2</a>
            <ul class="sub-menu">
                <li>
                    <a href="#">Sub Menu 1</a>
                </li>
                <li>
                    <a href="#">Sub Menu 2</a>
                </li>
                <li>
                    <a href="#">Sub Menu 3</a>
                </li>
                <li>
                    <a href="#">Sub Menu 4</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
        </li>
        <li><a href="#">Menu 4</a>
            <ul class="sub-menu">
                <li>
                    <a href="#">Sub Menu 1</a>
                </li>
                <li>
                    <a href="#">Sub Menu 2</a>
                </li>
                <li>
                    <a href="#">Sub Menu 3</a>
                </li>
                <li>
                    <a href="#">Sub Menu 4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Menu 5</a>
        </li>
    </ul>
    </body>
    </html>
Bước 2 tạo một file css đặt tên là main.css chứa nội dung sau:
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
Sau khi đó lưu lại và chèn vào trước thẻ </head> của file menu.html đoạn code sau:

<link rel="stylesheet" href="styles/red_v04_home/css/main.css" />

Lưu lại và chạy thử bạn sẻ thấy kết quả. Lưu ý bạn có thể chỉnh lại style của menu theo ý mình bằng cách chỉnh file main.css.

Chúc bạn thành công!
Thảo luận

0 nhận xét:

Post a Comment