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.

Comment của bạn

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

Notify of
avatar
600
Sort by:   newest | oldest
Chung Cư Lux City

Mình cảm ơn bạn nhé, mình đã thực hiện thành công 😀 http://phantrongnghia.com.vn/chung-cu-lux-city-quan-7-du-an-lux-city/http://lux-city.info/http://carariverview.org/ đấy 😀

wpDiscuz