Hướng dẫn Hướng dẫn tạo menu ngang đơn giản cho website

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,054
Reaction score
7,296
Hướng dẫn tạo menu ngang đơn giản cho website

Bài viết này sẽ hướng dẫn các bạn tạo một menu ngang đơn giản bằng CSS và HTML. Nếu như bạn nào đã đọc các bài viết trước thì sẽ dễ hiểu và sẽ dễ dàng hơn.

Đầu tiên chúng ta tạo file menu.html và thiết kế HTML để có được một menu ngang như sau.

menu-ngang.jpg

Và dưới đây là mã HTML mình viết trong file menu.html
Mã:
<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 viết mã HTML vào file menu.html các bạn ra ngoài chạy thử thì sẽ chưa thấy xuất hiện hình dạng một thanh menu ngang phải không. Các bạn yên tâm để làm cho nó trở thành một thanh menu ngang tuyệt đẹp thì chúng ta sẽ CSS để chỉnh sửa nó. Và bây giờ chúng ta sẽ viết một file CSS riêng bên ngoài rồi các bạn dẫn nó vào file HTML hoặc các bạn có thể viết trực tiếp trong phần thẻ <head> của file HTML nhé.

Còn mình thì sẽ tạo một file style.css và viết các lệnh CSS ở đó rồi dẫn nó vào file HTML cho nó chuyên nghiệp. Dưới đây là các lệnh mình viết trong file style.css.
Mã:
#menu ul{
list-style-type:none;
padding:0px;
margin:0px;
}

#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;
}
Sau khi các bạn viết các lệnh CSS này xong thì các bạn ra ngoài chạy file menu.html để xem kết quả như trên nhé.

Chúc các bạn thành công.


Nguồn: tuhocphp.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Bình (THB)

Skype chat, instant message

Mr. Tuấn
0988 488 096

Skype chat, instant message

Mr. Bình
0981 06 08 08
kinhdoanh@vnxf.vn

Top Bottom