Ali Jafarian

Have you ever wanted to build a slick slide down menu for categories or groups? Well today’s your lucky day! This tutorial will show you how to do just that, and some. We’re going to be building a jQuery slide down menu with a little bit of CSS3 thrown in. This type of menu interaction can be very useful for hidden or subdued navigation menus. Let’s get started!

The HTML

Our markup will consist of unordered lists within .column divs, that live inside a parent #menu div. We’ll use an anchor tag for the menu trigger. I also got really fancy and used an Arial font logo.

<div id="header">

  <h2>Tablet Review</h2>
  <a href="#" id="menu-trigger">Menu<span class="arrow"></span></a>

  <div id="menu">

    <div class="column">
      <h3>Apple</h3>
      <ul>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPad 2</a></li>
        <li><a href="#">iPad 3 (retina display)</a></li>
      </ul>
    </div>
    <!--/.column-->

    <div class="column">
      <h3>Android</h3>
      <ul>
        <li><a href="#">Samsung Galaxy</a></li>
        <li><a href="#">Asus Transformer</a></li>
        <li><a href="#">Google Nexus</a></li>
        <li><a href="#">Toshiba Thrive</a></li>
      </ul>
    </div>
    <!--/.column-->

    <div class="column">
      <h3>Other</h3>
      <ul>
        <li><a href="#">Blackberry Playbook</a></li>
        <li><a href="#">HP Touchsmart</a></li>
      </ul>
    </div>
    <!--/.column-->

  </div>
  <!--/#menu-->

</div>
<!--/#header-->

The CSS

We’ll use the display:none property on the #menu div to hide it by default (later will use jQuery to show it). We also have an icon sprite for the menu trigger icon that will change upon open and close using background-positioning. I’ve also thrown in some CSS3 gradients and transitions to give the menu a little bit of jazz! (wow, did I just say jazz?)

#header {
  background: #333333;
  background: -moz-linear-gradient(top, #333333 0%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#000000));
  background: -webkit-linear-gradient(top, #333333 0%,#000000 100%);
  background: -o-linear-gradient(top, #333333 0%,#000000 100%);
  background: -ms-linear-gradient(top, #333333 0%,#000000 100%);
  background: linear-gradient(to bottom, #333333 0%,#000000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 );
  float: left;
  height: 40px;
  position: relative;
  width: 860px;
  padding: 20px;
  border-bottom: 4px solid #666;
}
#header h2 {
  color: #999;
  display: inline;
  float: left;
  font-size: 1.5em;
}
#menu-trigger {
  position: relative;
  background: #06c;
  box-shadow: inset 0 0 5px #333;
  color: #eee;
  float: right;
  font-size: .75em;
  font-weight: bold;
  padding: 10px 40px 10px 20px;;
  text-decoration: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
}
#menu-trigger:hover {
  background: #167fe8;
}
#menu-trigger span.arrow {
  display: block;
  position: absolute;
  top: 10px;
  right: 15px;
  width: 12px;
  height: 12px;
  background: url(images/menu-arrow_sprite.png) no-repeat;
}
#menu-trigger.open span.arrow {
  background-position: 0 -12px;
}
#menu {
  background: url(images/trans-black_50.png);
  display: none; /* hide by default */
  left: 0;
  position: absolute;
  top: 80px;
  width: 860px;
  padding: 20px;
  z-index: 1000;
}
#menu .column {
  float: left;
  margin-left: 20px;
  width: 273px;
}
#menu .column:first-child {
  margin-left: 0;
}
#menu .column h3 {
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  margin: 0 0 10px;
}
#menu .column ul {
  font-size: .75em;
  list-style: none;
}
#menu .column ul:first-child {
  margin-left: 0;
}
#menu .column ul li {
  border-bottom: 1px solid #999;
}
#menu .column ul li:first-child {
  border-top: 1px solid #999;
}
#menu .column ul li a {
  color: #bbb;
  display: block;
  padding: 10px;
  text-decoration: none;
  transition: padding-left .5s;
  -moz-transition: padding-left .5s;
  -ms-transition: padding-left .5s;
  -webkit-transition: padding-left .5s;
  -o-transition: padding-left .5s;
}
#menu .column ul li a:hover {
  background: #000;
  color: #fff;
  padding-left: 20px;
}

The jQuery

And last but not least, the magical jQuery. Using roughly 10 lines of code we can write a function to slide the menu up and down on click. We’ll also assign an “open” class to the menu trigger when the menu is open. Makes sense, right?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	// build a variable to target the #menu div
	var menu = $('#menu')
	// bind a click function to the menu-trigger
	$('#menu-trigger').click(function(event){
		event.preventDefault();
		// if the menu is visible slide it up
		if (menu.is(":visible"))
		{
			menu.slideUp(400);
			$(this).removeClass("open");
		}
		// otherwise, slide the menu down
		else
		{
			menu.slideDown(400);
			$(this).addClass("open");
		}
	});
});
</script>

Summary

And voilà! We have a slick and smooth jQuery slide down menu. It’s a Friday night and I’m antsy to get a movie going, so I apologize for the brief instructions. Leave any questions or comments below and enjoy!

Discussion

5 thoughts on “jQuery Slide Down Menu”
      1. hi sir i need help from you , i am a beginner for html i have to develope a website like online shopping for my project , i need sample template like webpage with catagories and when we click the options the items has to be listed – like former shoppinf websites, how can i do that sir help me

  1. Thanks for the tutorial. I am tyrying to learn the slideDown() script you built to toggle a contact form using an anchor button. It’s not working. I changed the javascript from jquery/1.7.2/jquery.min.js to jquery-1.11.1.min.js. Is this the problem? http://digexart.com

Leave a Comment

Your email address will not be published. Required fields are marked *