Tạo menu một cấp bằng HTML đơn giản – Freetuts

Posted on by mtoplistChuyên mục:Top List

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.

test php

banquyen png

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:

menu 2 JPG

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

<div class="menu">
    <a href="https://freetuts.net" title="freetuts">Trang chủ</a>
    <a href="https://freetuts.net/hoc-c" title="freetuts">Học C/C++</a>
    <a href="https://freetuts.net/hoc-php" title="freetuts">Học PHP</a>
    <a href="https://freetuts.net/hoc-html-css" title="freetuts">Học HTML</a>
    <a href="https://freetuts.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 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
}

menu 1 JPG

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;
}

menu 2 JPG

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:

<ul class="menu">
    <li><a href="https://freetuts.net" title="freetuts">Trang chủ</a></li>
    <li><a href="https://freetuts.net/hoc-c" title="freetuts">Học C/C++</a></li>
    <li><a href="https://freetuts.net/hoc-php" title="freetuts">Học PHP</a></li>
    <li><a href="https://freetuts.net/hoc-html-css" title="freetuts">Học HTML</a></li>
    <li><a href="https://freetuts.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ó.

Demo

RUN

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

menu 4 JPG

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

Demo

RUN

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

menu 5 JPG

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

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

menu 2 JPG

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.

mtoplist