Xem ngayHỗ trợ miễn phí bởi Dreamlib.vn

Hướng dẫn sử dụng Koha: Tạo top-menu cho OPAC Koha- Phần 4- Chi tiết hơn


Phần này tôi sẽ share cho các bạn tất cả 5 loại menu cho Koha top-menu, có cái sử dụng jquery, có cái chỉ sử dụng html, css. File cuối bài. Tôi cũng đã upload toàn bộ file này lên địa chỉ http://dreamlib.vn/dropdown-menu/top-menu.
Các bạn hãy chắc chắn mình đã xem Hướngdẫn tạo left-menu phần 3. 
Paste đoạn code sau lên Opacheader, nhớ là trên cùng của Home › Administration › System preferences>Opacheader. (Như trong hình, copy lên trên cả đoạn code dành cho slider)

Mã:
<!--Menu for Header -->
<link rel="stylesheet" href="http://dreamlib.vn/dropdown-menu/top-menu/type1/styles.css">
<script src="http://dreamlib.vn/dropdown-menu/top-menu/type1/script.js"></script>
<div id='cssmenu'>
<ul>
   <li><a href='http://dreamlib.vn'><span>Dreamlib.vn</span></a></li>
   <li class='active has-sub'><a href='http://dreamlib.vn/categories/cng-dng-koha-tai-vit-nam.14/'><span>Koha</span></a>
      <ul>
       
         <li><a href='http://dreamlib.vn/threads/dang-ki-s-dung-koha-min-phi.76/'><span>Free to use</span></a></li>
         <li><a href='http://dreamlib.vn/forums/dreamlib-koha-tin-tuc-ve-koha/'><span>News</span></a></li>
         <li class='last'><a href='http://dreamlib.vn/forums/dreamlib-koha-huong-dan-su-dung/'><span>Tutorial</span></a></li>
       
      </ul>
   </li>
   <li><a href='http://dreamlib.vn/threads/muc-dich-cua-chung-toi.90/'><span>About us</span></a></li>
   <li class='last'><a href='http://dreamlib.vn/misc/contact'><span>Contact us</span></a></li>
</ul>
</div>

Tiếp theo chỉ cần thay đổi một số link là xong rồi. Vậy là bạn đã có một top-menu cực đẹp. Màu sắc mình để mặc định màu đỏ khá bắt mắt, bạn có thể thay đổi tùy theo ý bạn ( đưa vào ngay trong mấy div trên chẳng hạn, hoặc edit file css, upload lên host…). Các bạn làm tương tự cho các loại menu khác- có 5 loại cho bạn chọn.
Chỉ có một chú ý duy nhất đó là CSS property của Slider- “z-index: 30”, nên nếu không cẩn thận thì mấy cái sub-menu sẽ bị slider đè (trong trường hợp bạn sử dụng slider mà dreamlib hỗ trợ). Để tránh điều này, bạn hãy add vào file css với z-index:100; Chú ý add đúng chỗ, vì add sai cũng không có tác dụng. Ví dụ trong file css của bài này, mình đã add vào:

Mã:
#cssmenu > ul li.has-sub:hover ul {
  display: block;
  z-index:100;
}
[​IMG]

Tùy thuộc số tầng sub-menu mà các bạn chọn vị trí add cho đúng nhé. Vậy là đã xong series về Menu cho OPAC. Chú ý cuối cùng- bạn chỉ được dùng 1 loại menu- top hoặc left thôi nhé!