Tập hợp các menu ngang

Loại 1: Navigation normal luôn ở một vị trí cố định
          Đây là loại thiết kế từ các website cũ. Chỉ thiết kế bằng <ul> và <li> liên kết link bằng <a>. Sau đây tập hợp một số kiểu phổ biến xem w3school

Loại 2: Luôn cố định trên đầu 

1.Chỉnh sửa mẫu (Edit template)

2 Bạn cần xác định chính xác thẻ <div> chứa toàn bộ menu của bạn. Để làm điều này bạn có thể dùng công cụ Firebug của Firefox để xác định.

3 Đặt tất cả code liên quan đến cái menu vào giữa 2 thẻ sau đây

<div id="navigationbar">
... Code menu ở đây ...
</div>

4 Tìm đến thẻ ]]></b:skin> và paste đoạn code sau đây TRÊN nó

#navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

5 Save template lại và xem kết quả. http://hsgioi.blogspot.com

Loại 3: Nổi khi web site chạy qua top
 Đây là loại thường được sử dụng hiện nay

Bước 1: Thêm đoạn code CSS dưới đây vào trước thẻ ]]></b:skin>

#navigation{height:50px;width:100%;max-width:1080px;position:relative;display:block;background:transparent}#navigation.fixed{position:fixed; top:-4px;z-index:9999}

Bước 2: Thêm đoạn code JS dưới đây vào trước thẻ </body> trong template>html

<script>function handleScroll(){if(window.XMLHttpRequest){var offset=window.pageYOffset?window.pageYOffset:document.documentElement.scrollTop;document.getElementById(&#39;navigation&#39;).className=(offset&gt;104?&#39;fixed&#39;:&#39;&#39;)}}if(window.addEventListener){window.addEventListener(&#39;scroll&#39;,handleScroll,false)}else{window.attachEvent(&#39;onscroll&#39;,handleScroll)}    </script>

Bước 3: Tìm đến đoạn code html chứa menu của bạn và thêm đoạn code như sau:

<div id='navigation'> Phần chứa html menu</div>

Trong đó:

#navigation.fixed: là giá trị mà thanh menu ngang sẽ nhận khi chạm top

#navigation: là giá trị mà thanh menu ngang sẽ nhận khi chưa chạm top

View here


Reference    .doc
Jquenry menu  (tập hợp 36 Jquenry menus, đẹp ấn tượng)
Xem các menu Jquery