'Pushing' content down to reveal the menu items

'Pushing' content down to reveal the menu items

Hi

I have been trying to implement the following on this page:


At a viewport width of 1000px , the menu becomes a clickable 'Menu'
When i click it the 'carousel /  slides' comes down and the submenu items are revealed.
So far so good.
However the carousel justs 'jumps' down. I would like it to 'Slide' down smoothly instead.


Here is my script:

<script>
$(document).ready(function(){
$( '.handle' ).on( "click", function() {
      $( ".carouselWrp" ).toggleClass( 'menuSlide', 1000 );
    });
});
</script>


Here is the CSS:

.handle{
display: block;
    position: absolute;
    top: 25%;
    right: inherit;   
}

.menuSlide{
top:200px;
}

.carouselWrp{
display:block;width:100%;background-color:#111111;position:relative;
}


Any help that could help me achieve this is highly appreciated.

Thanks
Jayashree