Cách tạo menu ngang đơn giản 1 cấp bằng CSS và HTML

Menu hay thanh điều hướng trong website là thành phần không thể thiếu, nhằm mục đích để điều hướng tới các trang tương ứng một cách nhanh chóng. Trong bài viết này, mình hướng dẫn tạo thanh menu (1 cấp) ngang đơn giản bằng CSS và HTML.

cach-tao-menu-ngang-don-gian-1-cap-bang-css-va-html

Hướng dẫn tạo menu ngang bằng HTML và CSS

# Xây dựng cấu trúc cho menu

Chúng ta sẽ sử dụng thử <ul> và <li> để xây dựng “bộ xương” cho menu

<div id="menu">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">News</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Site Map</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
</div>

Sau khi lưu lại chúng ta sẽ có kết quả như sau:

tao-menu-ngang-hai-cap-bang-css-va-html

Để menu trên trở thành một thanh điều hướng đúng nghĩa, chúng ta cần thêm một tí CSS dưới dây:

#menu ul{
list-style-type:none;
padding:0px;
margin:0px;
}
/* dòng lệnh này để căn cho menu nằm ngang*/
#menu ul li{
display:inline;
}
 
#menu ul a{
text-decoration:none;
width:129px;
float:left;
background:#000;
color:#fff;
font-weight:bold;
text-align:center;
line-height:35px;
border-left:1px solid #fff;
}

Đây chỉ là cấu trúc cơ bản cho các bạn phát triển Menu theo tuỳ ý của mình. Như vậy trong bài này, mình đã hướng dẫn cho các bạn tạo menu đơn giản 1 cấp bằng CSS. Mình sẽ có thêm những bài hướng dẫn tao Menu đa cấp, với nhưng hiệu ứng nâng cao.

Cách tạo menu ngang đơn giản 1 cấp bằng CSS và HTML 4.31/5 (86.15%) 13 votes

Hãy bình luận, góp ý bằng Disqus để được hồi đáp nhanh hơn!
Sử dụng Facebook hoặc Google nếu không load được Disqus

Nhận nhiều thông tin bổ ích và quà tặng hấp dẫn
từ MELYWEB

Theo dõi blog MELYWEB để nhận được các tin tức bổ ích, khuyến mãi mới nhất, các quà tặng hấp dẫn.