0

I've found this very good looking responsive menu (resize browser window to see it in function):

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

I managed to implement it in my website, but I was wondering how could I add a smooth "slide down" animation to the menu, instead of just appearing like it does now.

Everything about its behaviour should be here (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);

and here (script.js)

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

Any help would be highly appreciated!

Thanks!

1 Answer 1

2

I think you should just be able to change

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

to

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

But I haven't been able to test this - could you post a jsfiddle?

2
  • It works PERFECTLY. I feel kinda dumb seeing how easy the solution was. Thank you so much!
    – Marco
    May 17, 2013 at 11:03
  • Woo hoo! No worries - it is only easy if you knew about slideToggle()!
    – DaveR
    May 17, 2013 at 11:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.