Trước tiên là đoạn mã cho Menu này
<style>
#menu {padding-left:5px;border-bottom:5px solid #0f95cb;font-size:12px}#menu a {color:#494949;font-weight:bold}
#menu tr, #menu td{height:25px;padding-top:4px}
#menu td {padding-left:5px;padding-right:5px;text-align:center}
#menu .active {background:#0f95cb;}
#menu .active a {color:#fff}
</style>
<div id="menu"><table cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="active">
<a href="/">Home</a></td>
<td width="23%"><a href="http://">Upload</a></td>
<td width="23%"><a href="http://">Blog</a></td>
<td width="23%"><a href="http://">Forum</a></td></tr>
</tbody></table></div>
Các thuộc tính quan trọng:
- border-bottom:5px solid #0f95cb; Độ dày đường viền phía dưới là 5px,nó có mã màu "#0f95cb".
- .active {background:#0f95cb; Màu nền của link hiện tại (ở ví dụ này là 'Home" )
Nhược điểm của menu này là không thể tự động chuyển màu khi chuyển sang link khác.Chính vì thế nên bạn phải chỉnh sử thủ công ở mỗi trang.
Ví dụ: ở trang Forum,tôi muốn dòng Forum có nền là xanh,thì bạn chỉ việc thêm thuộc tính .active {background:#0f95cb; vào trước td của link đó.
Cụ thể tôi làm như sau:
<tr>
<td >
<a href="/">Home</a></td>
<td width="23%"><a href="http://">Upload</a></td>
<td width="23%"><a href="http://">Blog</a></td>
<td class="active" width="23%"><a href="http://">Forum</a></td></tr>
Kết quả:
Chúc bạn thành công!
