Hướng dẫn tạo menu html

Bài này mình sẽ hướng dẫn cách tạo menu một cấp bằng HTML và CSS đơn giản. Menu 1 cấp là loại menu không có menu con nên cách thiết kế khá đơn giản.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử dụng thẻ UL và LI để bao quanh cho các phần tử menu. Hoặc bạn cũng có thể tạo một thẻ div, bên trong nó là danh sách các phần tử của menu.

Kết quả của bài này sẽ có giao diện như sau:

Bài viết này được đăng tại [free tuts .net]

Lưu ý: Menu sẽ là các link nên chúng ta phải sử dụng thẻ a để gắn link cho mỗi phần tử của nó nhé.

1. Xây dựng HTML cho menu 1 cấp

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

    Trang chủ
    Học C/C++
    Học PHP
    Học HTML
    Học Javascript

Bây giờ mình chỉ cần style CSS cho phần HTML này là sẽ có kết quả như mong muốn.

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é.

Demo RUN

.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.

Demo RUN

.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.

Demo RUN

.menu a:hover{
    color: #288cc4;
    background: #fff;
}

Các bạn hãy chạy chương trình và di chuyển qua các menu để xem kết quả nhé.

3. 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 thì dễ dàng hơn rất nhiều.

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

    
Trang chủ
    
Học C/C++
    
Học PHP
    
Học HTML
    
Học Javascript

Bước 1: Mặc định thì thẻ

.menu{
    background: #288cc4
}

0 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ó.

Demo RUN

.menu{
    margin: 0px;
    padding: 0px;
    background: #288cc4
}

Bước 2: Vì thẻ

.menu{
    background: #288cc4
}

1 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

.menu{
    background: #288cc4
}

2.

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

Demo RUN

.menu li{
    float:left;
    list-style: none
}

Ồ, có vẻ như background đã bị mất rồi. Lý do là ta đã sử dụng

.menu{
    background: #288cc4
}

3 cho các thẻ

.menu{
    background: #288cc4
}

1, nên chiều cao của menu sẽ không còn phụ thuộc vào thẻ

.menu{
    background: #288cc4
}

1 nữa. Ta hãy thêm thuộc tính overflow:hidden cho

.menu{
    background: #288cc4
}

6 thì sẽ giải quyết được.

.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.

Demo RUN

.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.