如何動畫這個響應式切換菜單？

Question

我發現這個挺好看的響應菜單（調整瀏覽器窗口中看到它在功能）：

http://themetaq.com/demos/responsive-toggle-menu/

我設法實現它在我的網站上，但我不知道我怎麼可以添加一個平滑的「滑下」動畫到菜單，而不是像現在這樣出現。

一切有關它的行爲應該在這裏（plugins.js）

/* MOBILE COLLAPSE MENU */ 
(function($) { 
    $.fn.collapsable = function(options) { 
// iterate and reformat each matched element 
return this.each(function() { 
    // cache this: 
    var obj = $(this); 
    var tree = obj.next('.navigation'); 
    obj.click(function(){ 
    if(obj.is(':visible')){ tree.toggle();} 
    }); 
    $(window).resize(function(){ 
    if ($(window).width() <= 570){tree.attr('style','');}; 
    }); 
}); 
}; 
})(jQuery); 

和這裏（的script.js）

$(document).ready(function(){ 
$('.slide-trigger').collapsable(); 
}); 

任何幫助，將不勝感激！

謝謝！

Answer 1

，我認爲你應該能夠改變

obj.click(function(){ 
    if(obj.is(':visible')){ tree.toggle();} 
}); 

到

obj.click(function(){ 
    if(obj.is(':visible')){ tree.slideToggle();} 
}); 

但我一直沒能對此進行測試 - 你可以發佈的jsfiddle？