Menu ngang là một phần không thể thiếu trong các website tin tức, bán hàng. Vậy cách làm nó như thế nào trong nội dung bài này tôi sẽ hướng dẫn bạn từng bước.

Ý tưởng

Trước hết bạn cần xác định cấu trúc html của menu nang một cấp. Các phần tử menu có tính chất giống nhau chính vì vậy bạn nên sử dụng cấu trúc ul li. #wrapper chính là div bao quanh toàn bộ thân website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Menu ngang 1 cấp</title>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <ul id="main-menu">
                <li><a href="">HTML CSS</a></li>
                <li><a href="">PHP MASTER</a></li>
                <li><a href="">BOOTSTRAP AZ</a></li>
                <li><a href="">JQUERY</a></li>
                <li><a href="">RESPONSIVE</a></li>
            </ul>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
</body>
</html>

Trước hết bây giờ chúng ta cần thực hiện reset lại css. Đây là bước hủy bỏ những thiết lập mặt định lên các đối tượng html để dễ dàng định dạng hiển thị theo ý mình.

*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

Chúng ta sẽ tạo phân thân website căn giữa và có độ rộng 960px

#wrapper{
    width: 960px;
    margin: 0px auto;
}

Để thiết lập các phần tử của menu nằm ngang chúng ta thiết lập display: flex cho ul#main-menu.

ul#main-menu{
    display: flex;
    background: orange;
}

Tiếp tục định dạng cho thẻ a của từng menu

ul#main-menu a{
    padding: 5px 10px;
    display: block;
    color: #ffffff;
}

Sau khi hoàn thành bước trên ta có được kết quả như bên dưới

Bây giờ chúng ta sẽ làm thiết lập hiệu ứng khi hover vào menu.

ul#main-menu li:hover a{
    color: #4f4242;
}

Bên dưới là hết quả sau khi hover

Bên dưới là nội dung file main.css

*{
    margin: 0px;
    padding: 0px;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

#wrapper{
    width: 960px;
    margin: 0px auto;
}

ul#main-menu{
    display: flex;
    background: orange;
}

ul#main-menu a{
    padding: 5px 10px;
    display: block;
    color: #ffffff;
}

ul#main-menu li:hover a{
    color: #4f4242;
}

#content {
    padding: 20px 0px;
}

Kết luận

Vậy chúng ta đã xây dựng được menu ngang 1 cấp bằng html css vô cùng nhanh chóng. Bây giờ bạn hoàn toàn có thể dựa vào ý tưởng này để thay đổi màu sắc, background, font chữ để có được menu đúng theo nhu cầu của mình. Trong một bài viết khác tôi sẽ tiếp tục hướng dẫn bạn xây dựng menu ngang đa cấp.