Как оживить это отзывчивое меню?

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?