Hướng dẫn tạo một thanh menu đơn giản.

Tại sao phải tạo thanh meu ?
Thanh menu đơn giản là thanh menu mặc định đó. Vậy thì cẫn gì phải tạo cái mới làm gì?
Vấn đề là nó không đẹp và việc tùy biến nó rất khó khăn, nhất là không thể gắn thêm lệnh mới theo ý ta vào đó được. Ví dụ bạn có một trang ảnh, một trang nhạc và bạn muốn đặt thêm vào đó một menu để mọi người đễ dàng bấm cho tiện thì không thể thêm được. Thanh menu mặc định chỉ có mấy chữ thế này thôi, còn toàn bộ code là do "ông chủ" của chúng ta nắm giữ nên ta không làm gì được

Code:


{GENERATED_NAV_BAR}


uy nhiên ta có thể đánh cắp các lệnh trong đó rồi xóa nó đi và lập một thanh menu mới. Như vậy thanh menu mới là của ta, code là do ta nắm giữ, ngoài các lệnh đã lấy trên thanh menu mặc định, ta hoàn toàn tự do thêm bớt hay tùy biến kiểu gì cũng được. .

Nói thì dễ nhưng khi làm thì vướn một chuyện là có một lệnh rất cần thiết trên thanh menu măc định nhưng không đánh cắp được đó là lệnh về tin nhắn. Mãi cho tới nay sau khi có bài này của ligerv thì điều này mới được giải quyết hoàn toàn: .../t16241-topic

Cách tạo thanh menu:
Các lệnh của nó chỉ đơn giản thế này thôi. Nó có hai phần :
- Phần các lệnh : Nằm trong Cặp thẻ <div>...</div>.
Mỗi lênh nằm một cặp thẻ <li>...</li>. Vậy các bạn có thể tự do thêm lệnh mới bằng cách thêm một cặp thẻ <li>...</li>, hay xóa bớt cái nào thấy không cần thiết.
- Phần định dạng: Đây là phần quan trọng nhất để làm đẹp cho thanh menu. Mình đã ghi chú cụ thể ý nghia của từng mục để các bạn sửa theo ý mình.

Đây là code thanh menu cơ bản:

Code:


<style type="text/css">
#mainnav {
  background: #FF0033; /* Màu nền */
  height: 24px;
  line-height: 24px;
  width: 100%; /* chiều rộng của thanh menu
  margin: 0 auto 24px auto; /* Căn giữa màn hình */
  border-top : 1px solid #008000; /* Đường viền trên */
  border-right : 1px solid #0080C0; /* Đường viền phảo */
  border-bottom : 2px solid #0080C0; /* Đường viền dưới */
  border-left : 2px solid #008000; /* Đường viền trái*/
  text-align: left; /* Fix cho IE */
 -moz-border-radius: 6px;  /* Bo tròn 2 đầu */
}
#mainnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#mainnav ul li {
  margin: 0;
  padding: 0;
  display: inline; /* Các phần tử li sẽ ở trên một dòng*/
}

#mainnav li a {
  color: #ffffff; /* màu chữ */
  font-family: Tahoma, Times New Roman;
  font-size:13px;
  font-weight: bold;
  padding: 0 10px; /* Khoảng cách 2 bên của mỗi menu */
  border-right: 1px solid #FFFF00; /* Đường ngăn giữa các menu */
  text-decoration: none; /* Bỏ gạch chân */
}

#mainnav li a:hover,
#mainnav li a:active,
#mainnav li a:focus {
 color: #FF0000;  /* Màu chữ khi rê chuột vào */
background-color:#FFFFD9; /* Màu nền khi rê chuột vào */
}
</style>

<script type="text/javascript">
$(document).ready(function(){$.ajax({
  url: '/privmsg?folder=inbox',
  success: function(ajax) {
    count = $('img[src="http://2img.net/i/fa/subsilver/folder_new.gif"]', ajax).length;
    if (count < 1) {
      $('a.mailbox').html('Tin nhắn');
    }
    else {
      $('a.mailbox').html('Có <strong> <blink>'+count+'</blink></strong> thư mới ');
    }}
});
 });
</script>

  <div id="mainnav">
  <ul>
    <li><a href="/portal" title="portal">Trang chủ</a></li>
    <li><a href="/forum" title="Forum">Diễn đàn</a></li>
    <li><a href="/search" title="Tìm kiếm">Tìm kiếm</a></li>
    <li><a href="/faq" title="Trợ giupa">Trợ giúp</a></li>
    <li><!-- BEGIN switch_user_logged_in --><a href="/profile?mode=editprofile" title="Lý lịch">Lý lịch</a><!-- END switch_user_logged_in --></li>
    <li><!-- BEGIN switch_user_logged_in --><a href="/memberlist" title="Thành viên">Thành viên</a><!-- END switch_user_logged_in --></li>
  <li><!-- BEGIN switch_user_logged_out --><a href="/register"><blink>Đăng ký</blink></a><!-- END switch_user_logged_out --></li>
  <li><!-- BEGIN switch_user_logged_out --><a href="/login">Đăng nhập</a><!-- END switch_user_logged_out --></li>
    <li><!-- BEGIN switch_user_logged_in --><a href="#" title="Tin nhắn">Tin nhắn</a><!-- END switch_user_logged_in --></li>
    <li><!-- BEGIN switch_user_logged_in --><a href="/login?logout=1" title="Thoát">Thoát</a><!-- END switch_user_logged_in --></li>
  </ul>
  </div>


ác bạn bổ sung thêm lệnh, làm đẹp theo ý thích rồi vào header thay cho {GENERATED_NAV_BAR} là xong