Ring ring

CuDemVN.Wap.Sh

- 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

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

Hướng dẫn tạo Menu ngang đơn giản 1 cấp 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><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

Hướng dẫn tạo Menu ngang đơn giản 1 cấp bằng CSS và HTML
[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
↑↑ Lượt xem: 281
score
Đánh giá: 4.5/ 5, 281 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-281]