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

[hunghsmn]

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}

Tuy 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: http://diendan.chinhphuc.info/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á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

[_Mark_]

thank bác, bài hay lắm ạ (tem )

[hunghsmn]

Xem thử:

Code:

http://www.trekhuyettat.org/h165-page

[baivong]

Có chút nhầm lẫn Navbar có thể chỉnh sửa được.
Display -> Hompage -> Headers & Navigation -> Nav links
Có thể dễ dàng thay đổi thứ tự, thêm bớt menu, phân quyền thành viên

[upkey1010]

Cho mình hỏi làm sao đưa menu này ra giữa thế.
Mình đã đưa thẻ center vào nhưng nó không có tác dụng

[baivong]

Cho mình hỏi làm sao đưa menu này ra giữa thế.
Mình đã đưa thẻ center vào nhưng nó không có tác dụng

Display - Homepage - Headers & Navigation - Menu position : Center

[upkey1010]

Cho mình hỏi làm sao đưa menu này ra giữa thế.
Mình đã đưa thẻ center vào nhưng nó không có tác dụng

Display - Homepage - Headers & Navigation - Menu position : Center

à không, cái thanh menu tự tạo của mình kìa.
chớ thanh menu mặc định em cũng biết làm rồi

[hizen]

cái này của bác Hùng share rồi mà

[sujymajyeuem]

Code:

ai giúp em làm cái thanh menu màu diễn đàn này của em ko giúp em với Thanks All
http://diendan.xuantienvip.tk

[hunghsmn]

ai giúp em làm cái thanh menu màu diễn đàn này của em ko giúp em với Thanks All
http://diendan.xuantienvip.tk

Đó là cái thanh menu đơn giản hơn cả cái đơn giản của topic này mà

[hj4uk0j0o97]

bác hùng có thể điền giúp cháu đưọc kô ạk, điền cho cháu giống cái demo của bác ý .

[linus1803]

Cảm ơn bạn nhiều nhiều lắm. Rất vui và hạnh phúc khi có những người sẵn sàng chia sẻ như bạn. Một lần nữa xin cảm ơn bạn.

[hunghsmn]

Cảm ơn bạn nhiều nhiều lắm. Rất vui và hạnh phúc khi có những người sẵn sàng chia sẻ như bạn. Một lần nữa xin cảm ơn bạn.

Bạn ơi mình già rồi giữ đâu có mang theo được

[kinhthienvan]

thanks

[KillAlt1.0]

cháu là cháu cám ơn bác liền

[kzinpro]

menu này sao có tin nhắn nó không thông báo!

[miamor]

Xem thêm tại topic này: http://diendan.chinhphuc.info/t16241-topic

[Sponsored content]