1.1. Xây dựng HTML cho menu 1 cấp - Bằng thẻ div

Mình sẽ chọn giải pháp là tạo một thẻ div để bọc các menu lại nhé.

1
2
3
4
5
6
7
<div class="menu">
    <a href="https://a.net" title="freetuts">Trang chủ</a>
    <a href="https://a.net/hoc-c" title="freetuts">Học C/C++</a>
    <a href="https://a.net/hoc-php" title="freetuts">Học PHP</a>
    <a href="https://a.net/hoc-html-css" title="freetuts">Học HTML</a>
    <a href="https://a.net/hoc-javascript" title="freetuts">Học Javascript</a>
</div>

Bây giờ mình chỉ cần style CSS cho phần HTML này như : float left

 =>   là sẽ có kết quả như mong muốn.


1.2. Bổ sung CSS cho menu 1 cấp

Bước 1: Mình muốn background menu có màu xanh nên sẽ viết CSS cho thẻ div bao quanh nhé.

1
2
3
.menu{
    background: #288cc4
}


Bước 2:Tạo font chữ màu trắng cho các menu. Bổ sung khoảng trắng và tăng khoảng cách giữa các menu.

1
2
3
4
5
6
.menu a{
    display: inline-block;
    padding: 5px 10px;
    color:#fff;
    text-decoration: none;
}


Trông đẹp hơn rất nhièu rồi phải không các bạn. Bây giờ mình muốn tạo hiệu ứng khi di chuyển chuột vào các menu thì background sẽ đổi sang màu trắng, đồng thời màu chữ đổi sang màu xanh.

Để tạo CSS di chuyển chuột thì ta sử dụng thuộc tính CSS :hover.

1
2
3
4
.menu a:hover{
    color: #288cc4;
    background: #fff;
}



2.1. Chọn thẻ UL và LI để xây dựng menu 1 cấp

Giải pháp này thì cấu trúc HTML sẽ hơi phức tạp, nhưng sau này nếu bạn muốn bổ sung menu con (tức là menu cấp 2) thì dễ dàng hơn rất nhiều.

Cấu trúc HTML sẽ có dạng như sau:

1
2
3
4
5
6
7
<ul class="menu">
    <li><a href="https://a.net" title="freetuts">Trang chủ</a></li>
    <li><a href="https://a.net/hoc-c" title="freetuts">Học C/C++</a></li>
    <li><a href="https://a.net/hoc-php" title="freetuts">Học PHP</a></li>
    <li><a href="https://a.net/hoc-html-css" title="freetuts">Học HTML</a></li>
    <li><a href="https://a.net/hoc-javascript" title="freetuts">Học Javascript</a></li>
</ul>

Bước 1: Mặc định thì thẻ ul sẽ có dính CSS padding và margin. Vì vậy, ta sẽ cần reset để menu hiển thị như phần 1. Ta cũng không quên bổ sung background cho nó.

1
2
3
4
5
.menu{
    margin: 0px;
    padding: 0px;
    background: #288cc4
}


Bước 2: Vì thẻ li hiển thị dạng block, nên một là ta chuyển nó sang dạng inline, hai là sử dụng float để đẩy nó về một phía. Ta cũng nên xóa đi các dấu chấm bằng cách sử dụng list-style:none.

Mình sẽ sử dụng float nhé.

1
2
3
4
.menu li{
    float:left;
    list-style: none
}



Ồ, có vẻ như background đã bị mất rồi. Lý do là ta đã sử dụng float:left cho các thẻ li, nên chiều cao của menu sẽ không còn phụ thuộc vào thẻ li nữa. Ta hãy thêm thuộc tính overflow:hidden cho .menu thì sẽ giải quyết được.

1
2
3
4
5
6
.menu{
    margin: 0px;
    padding: 0px;
    background: #288cc4;
    overflow: hidden
}

Bước 3: Bây giờ ta chỉ cần style thẻ a như phần 1 là được.

1
2
3
4
5
6
7
8
9
10
.menu a{
    display: inline-block;
    padding: 5px 10px;
    color:#fff;
    text-decoration: none;
}
.menu a:hover{
    color: #288cc4;
    background: #fff;
}


Kết quả đã như mong đợi.

Như vậy là mình đã hướng dẫn xong cách xây dựng menu 1 cấp bằng HTML và CSS đơn giản. Bài này mình muốn các bạn rèn luyện kỹ năng xử lý từng tình huống khi xây dựng menu. Sau này các bạn sẽ gặp nhiều loại menu phức tạp hơn rất nhiều.


Bài tập làm menu cấp 1



Bài tập làm menu cấp 2 (dọc)


Bài tập làm menu cấp 2 (ngang)