jQuery: vertical sliding menu

A vertical sliding menu is a vertical menu that is activated by an external control, generally put before the menu itself. This control is made up of an HTML element showing an icon (such as an arrow) that indicates that the element in question is clickable or active. When a user clicks or activates the control, the menu is shown and the control's icon changes to indicate that now the menu itself can be hidden by clicking on the element. Implementing this feature is quite easy with jQuery. First, we need an HTML structure to start with:

<div id="navigation">

    <h4>Navigation</h4>

 <ul>
 
   <li><a href="#">Home</a></li>
   <li><a href="#">Articles</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contacts</a></li>
 
 </ul>

</div>

Next, in our CSS styles we need to define a class (named close) to be added when a user clicks on the control to show the menu:

#navigation {
 width: 15em;
 margin: 1em;
 font: 100% Arial, sans-serif;
}

#navigation ul {
 width: 13em;
 padding: 1em;
 background: #a40;
 margin: 0;
 list-style: none;
 border-radius: 0 0 6px 6px;
 
}

#navigation ul li {
 height: 100%;
 margin-bottom: 0.3em;
}

#navigation ul li a {
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 padding: 0.4em;
 display: block;
 height: 100%;
}

#navigation ul li a:hover {
 background: #c40 url(arr-down.gif) no-repeat 100% 50%;
}

#navigation h4 {
 margin: 0;
 font-size: 1.2em;
 font-weight: normal;
 height: 100%;
 padding: 0.2em;
 color: #fff;
 background: #c40 url(arr-down.gif) no-repeat 95% 50%;
 text-align: center;
 text-transform: uppercase;
 border-radius: 6px 6px 0 0;
 cursor: pointer;
}

#navigation h4.close {
 background: #c40 url(arr-up.gif) no-repeat 95% 50%;
}

With jQuery, we need to check whether the menu is currently hidden or not. If it's hidden, we show it, otherwise we hide it:

$(document).ready(function() {

  $('#navigation ul').hide();
  
  $('#navigation h4').click(function() {
  
  
    if($('#navigation ul').is(':hidden')) {
    
    
      $('#navigation ul').slideDown();
      $(this).addClass('close');
    
    } else {
    
      $('#navigation ul').slideUp();
      $(this).removeClass('close');
    
    
    }
  
  
  
  });


});

You can see the demo below.

Demo

Live demo