Vertical CSS menu with jQuery toggle effect

Posted by Fahad Ibnay Heylaal on Sep 15th 2008, 15:09 - in CSS

I have already discussed about jQuery toggling in one my early posts. Now I am going to explain how to create a vertical css menu with a show/hide feature. You will get an idea if you see the image below:

Preview

HTML (the list)

We are going to have our unordered list in a container with its ID as 'menu'. I have also included the jQuery code inside <h3>. Notice the .slideToggle() function. This piece of code will handle the show/hide feature for your unordered list with ID 'mylist'.

  1.  
  2. <div id="menu">
  3.     <h3 onclick="javascript: $('#mylist').slideToggle('slow');">Click to toggle</h3>
  4.     <ul id="mylist">
  5.       <li><a href="#">my sample link #1</a></li>
  6.       <li><a href="#">my sample link #2</a></li>
  7.       <li><a href="#">my sample link #3</a></li>
  8.     </ul>
  9. </div>

The CSS

You can always edit the css code so that it matches your site's colour scheme.

  1. #menu {
  2.   width: 200px;
  3.   border: 1px solid #ccc;
  4.   padding: 0px;
  5.   margin: 0px;
  6. }
  7.  
  8. #menu h3 {
  9.   height: 30px;
  10.   font-weight: normal;
  11.   background-color: #555;
  12.   color: #fff;
  13.   padding: 3px 0px 0px 3px;
  14.   margin: 0px;
  15. }
  16.  
  17. #menu ul, #menu ul li {
  18.   padding: 3px;
  19.   margin: 0px;
  20.   list-style: none;
  21. }
  22.  
  23. #menu ul li {
  24.   height: 30px;
  25.   vertical-align: middle;
  26. }
  27.  
  28. #menu ul li a {
  29.   display: block;
  30.   border-bottom: 1px dashed #eee;
  31.   text-decoration: none;
  32.   font-weight: bold;
  33. }

Dont forget to add the jQuery javascript file inside the HEAD tag of you web page. The toggle effect wont work without this library.

Have fun!

Share: