Slide effect navigation menu

Question

This is the site I'm working on..

http://jasalounge.com/test/home/

I've coded the navigation menu to work with basic JavaScript and CSS but I would like it to be done correctly with a slide down effect.

I'm also using 2 navigation menu's to try and create this effect. I know I shouldn't have to code it this way but it was the only way I could get it to work. I really need some help to get this fixed.

The site currently does what I want it to do except for the slide effect when the menu button is clicked.

If some one can help me with this I would really appreciate it.

Here is an example of what I would like my menu to do.

http://responsivemobilemenu.com/en/

Answer 1

Here on hovering on menu it is sliding down and on again clicking on it its slides up.This is just a sample. You can do it on "click" also.

$(function(){
  $('.dropdown-1').hide();
  $('#menu').hover(function(){
        $('.dropdown-1').slideDown('medium');
  }, function(){
        $('.dropdown-1').slideUp('medium');
  });
})

http://jsfiddle.net/gurPn/77/

Answer 2

This is the answer to my question.

$(function(){
if(window.innerWidth <= 760) {
   $('#headerNav').hide();
}


    $("#menuIcon").click(function(){
     $("#headerNav").slideToggle("fast");
     });

    $(window).resize(function(){

    if(window.innerWidth > 760) {
    $("#headerNav").removeAttr("style");
    }

    });

})