Simple slide down menu using css & jQuery

In this tutorial I'll show you how to make a simple slide down hamburger menu using CSS and jQuery.

First we'll create the hidden menu panel and hamburger button, as well as the close button.Then we'll code the javascript to slide the menu down when the hamburger button is clicked and then back up when the close button is clicked.

The CSS:

The menu panel is hidden using display:none.

/* The hidden menu panel: */
#menu-panel{
position:absolute;
display:none;
width:100%;
height:100%;
background:#333;
color:#fff;
z-index:1000;
}

/* The hamburger and close buttons: */
#nav-button,#nav-close{
float:right;
right:0;
margin:10px 0 auto auto;
width:50px;
height:50px;
cursor:pointer;
}

#nav-button{
background:url(../images/hamburger.png) #333 no-repeat;
}

#nav-close{
background:url(../images/close.png) #fff no-repeat;
}

/* Because the buttons are floated, you'll need a clear fix class: */
.clearfix{
clear:both;
}

The HTML:

You'll want to put the hidden menu panel above your header in your code and the hamburger button inside your header.

<div id="menu-panel">
    <div id="nav-close"></div>
    <div class="clearfix"></div>
</div>

<header>
    <div id="nav-button"></div>
    <div class="clearfix"></div>
</header>

Include jQuery after your closing body tag:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Then add the javascript:

<script type="text/javascript">

$(function (){

$('#nav-button').click(function (){

$('#menu-panel').slideDown(600);

});

$('#nav-close').click(function (){

$('#menu-panel').slideUp(600);

});

});

</script>