Làm điệu cho menu của Thesis

Hello các bác, cũng lâu lâu em không update blog, nhưng dạo quanh một vòng thấy các bác sôi nổi quá nên em cũng về nhà tranh thủ làm bài.

Như tiêu đề của bài viết này, em muốn giới thiệu đến các bác một mẹo nhỏ giúp làm điệu cho cô nàng Thesis đỏng đảnh mà rất nhiều bác đã trót yêu. Chắc hẳn những bác dùng Thesis thì cũng phải công nhận một trong những điểm mạnh của Thesis chính là hệ thống custom menu khá linh hoạt, hỗ trợ nhiều kiểu, hỗ trợ dropdown nên giúp các bác thoải mái hơn rất nhiều trong việc tạo ra một menu như ý. Nhưng hiệu ứng dropdown của Thesis chỉ dừng lại ở css. Còn hôm nay em muốn giới thiệu đến các bác một mẹo nhỏ giúp cho cái menu này trượt xuống một cách mềm mại hơn, tất nhiên là em Thesis của các bác vì thế cũng xinh ra bội phần :D

Không lan man dài dòng nữa em đi vào chủ đề chính luôn, để tạo ra hiệu ứng này các bác cần có hai thứ:

  1. jQuery
  2. đoạn code js

Để biết blog của các bác đã load jQuery hay chưa thì các bác cần viewsource để xem nhé, nếu load rồi thì không cần load thêm nữa.

Còn đoạn code đầy đủ cho Thesis khi chưa load jQuery, các bác paste vào file custom_functions.php nhé

/********************************************************************
Thêm hiệu ứng trượt cho menu Thesis trong trường hợp chưa có jQuery
********************************************************************/
add_action('wp_head', 'menu_effect');
function menu_effect() { ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu ul").css({display: "none"}); // Opera Fix
$(".menu li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
});
</script>
<?php
}

Trong trường hợp có jquery rồi thì các bác dùng đoạn dưới này

/********************************************************************
Thêm hiệu ứng trượt cho menu Thesis trong trường hợp có jQuery
********************************************************************/
add_action('wp_head', 'menu_effect');
function menu_effect() { ?>
<script type="text/javascript">
$(document).ready(function(){
$(".menu ul").css({display: "none"}); // Opera Fix
$(".menu li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
});
</script>
<?php
}

Demo các bác xem ở đây nhé http://vunamhung.com/test/

Phản hồi (36) | Gửi một phản hồi

  1. các anh ơi cho em hỏi cái ạ. em cài Blogussion 1.
    0.2 thanh công rồi. sau đấy em lên trên mạng co thêm Blogussion theme PSD. trong đó có 1 file đuôi PSD. file này cài vào đâu hả các anh ơi. em ngu máy tính lắm các anh đừng cười em nha. hương dẫn em với . email cua em : deptrainhatthon@yahoo.com.vn

    Reply
  2. cái kiểu comments này sử dụng plugin gì vậy mấy anh? em dùng Brians Threaded Comments nhưng mà nó xấu wa”.

    Reply
    newbie
    23/06/2010
    • Hihi, cái này là anh tự tùy biến, em sẽ có dịp dùng trong Vpress sắp tới :D

      Reply
      • em thấy bên misao cũng có mà! và nhiều blog khác nữa. mà anh biết có plug-in nào có chức năng giống như vậy hok ạ!

        Reply
        newbie
        25/06/2010
  3. Hi, Em mới gửi email tới Bác, ko biết Bác đã nhận được chưa?

    Reply
    Hoang Long
    25/05/2010
  4. công nhận quá hay … đơn giản nữa … :) cám ơn cám ơn hutek quá nhiều :) :2:

    Reply
  5. A à cho em hỏi với,E Cu3er làm thế nào để mở Trên 1 của Sổ vậy?

    Reply
  6. Bài viết chỉ dẫn hay quá, e đang xây dựng cái thêm này , mù tịt vớ đc cọc

    Reply
  7. Hay quá! Vote vote vote!!! :vic:

    Reply
    • lâu lắm mới thấy bác ghé thăm tệ xá, dạo này bác vẫn blog đều đều chứ :soldier:

      Reply
      • Hutek hỏi thế thì cũng có nghĩa là lâu lắm rồi hutek chưa ghé thăm giải pháp số.

        Reply
  8. Bài viết hay quá, menu trông rất ngon :vic:

    Reply
  9. Mãi mới thấy bác rặn được 1 bài. Tuy nhiên lần này tiêu đề có khá hơn. Không cho cả một đoạn văn như bài trước làm title nữa. :cuoi_duyen:

    Mà theme của em thế nào rồi. :((

    Reply
    • Em tưởng 2 bác chung cái mẫu của blog bác Tỉnh luôn, hóa ra là có khác ah :cuoi_duyen: kiểu này làm xong chắc bác Hutek “thoát thai hoàn cốt” mất thôi :D

      Reply
  10. Chú Hưng đầu bác trắng mà vẫn xuất chưởng thâm hậu thật :2:

    Reply
    • trẻ tuổi mà đầu bạc trắng à?Bên Nhật em có loại thuốc uống Là hết Liền,Có cần em Sent hổng? :x

      Reply
  11. Em thấy điệu như demo vẫn nhanh. Bác chỉnh cho nó chậm hơn 1 chút và màu mè một chút.

    Reply
  12. Cái này giống của One-Theme nhỉ. Hiệu ứng này em ưa thích nhất đấy. Theme của em cũng đã sử dụng cái này :D

    Reply
  13. Bác có hình demo ko? sau khi “xuất chiêu” thì menu của em thesis trông sẽ ra sao nhỉ? :godfather:

    Reply
  14. Nếu bác rành code thì cho em hỏi có cách nào để lấy được Database Call của một thêm ko nhỉ? DÙng cái gì?

    Reply
  15. Hồi 2 đã ra mắt, mời bác Hưng thỉnh giáo :D !

    Cái này ko biết có áp vào Hybrid nhà em được ko nhỉ?

    Reply
    • Được chứ, javascript đâu có phân biệt nàng nào đâu :D . Có điều cần phải sửa đổi các selector trong đoan code jQuery trên cho phù hợp là được.

      Reply
  16. lâu lâu bác ra bài viết hay đấy :D

    Reply
  17. Lâu lắm mới thấy anh Hưng xuất chưởng :D

    Reply
  18. hé hé…đa tạ Hưng tiền bối.
    Em không dùng đến… khà khà !
    ( cho em hỏi cái wp smiley của em…nó không hiện được ở trong comment, nhưng vẫn hiện đc ở cuối khung comment )
    tác giả tưởng xung đột plugin, em tắt hết sạch còn lại wp smile và askimet nhưng vẫn không được.
    Hưng tiền bối thử bắt bệnh dùm em :2:

    Reply
  19. Đã giác ngộ bài này của bác Hưng :D thêm thêm mấy cái hiệu ứng nữa cho anh em chiêm ngưỡng đi bác :godfather:

    Reply
    • Hí hí, cái này phụ thuộc vào jquery thôi mà, để em về vận nội công rồi sẽ show hàng tiếp cho các bác

      Reply

Gửi một phản hồi

  Tự động TELEX Tắt

:D ^:)^ ~O) :P =(( =P~ :(( =)) more »

PingBack/TrackBack

  1. Tin Nóng Trong Tuần Bạn Nên Biết | Blog Kiếm Tiền
  2. Tweets that mention Làm điệu cho menu của Thesis | Hutek.info -- Topsy.com

jQuery('#large_banner').cycle({
    fx:     'scrollDown', 
    easing: 'bounceout', 
    delay:  -4000,
    timeout: 8000 
});
jQuery('#breaking_news').cycle({
    fx:     'scrollDown', 
    delay:  -4000 
});