GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam

AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam

HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ

Trang chủ >> WapMaster

Tìm Kiếm → Thảo Luận

Hướng dẫn tạo Menu ngang đơn giản 1 cấp bằng CSS và HTML

RoSino18k

29-05-2016

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.

[Tải ảnh]

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

[Tải ảnh]

Để 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.
Hy vọng các bạn sẽ theo dõi và đón đọc tại Cú Đêm Việt Nam. Chúc các bạn thành công!

Nguồn: MeLyWeb.Net