Geeks With Blogs


Microsoft MVP


Moderator at CodeASP.NET

Quiz Master

free counters
Free counters
Added on January 19,2012

Follow Me @vmsdurano

A bit About Me

The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.

Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

In this post I'll demonstrate how to make a simple collapsible menu using jQuery. To get started let's go ahead and fire up Visual Studio and create a new WebForm.  Now let's build our menu by adding some div, p and anchor tags. Since I'm using a masterpage then the ASPX mark-up should look something like this:


   1:  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
   2:          <div id="Menu">
   3:              <p>CARS</p>
   4:              <div class="section">
   5:                  <a href="#">Car 1</a>
   6:                  <a href="#">Car 2</a>
   7:                  <a href="#">Car 3</a>
   8:                  <a href="#">Car 4</a>
   9:              </div>
  10:              <p>BIKES</p>
  11:              <div class="section">
  12:                  <a href="#">Bike 1</a>
  13:                  <a href="#">Bike 2</a>
  14:                  <a href="#">Bike 3</a>
  15:                  <a href="#">Bike 4</a>
  16:                  <a href="#">Bike 5</a>
  17:                  <a href="#">Bike 6</a>
  18:                  <a href="#">Bike 7</a>
  19:                  <a href="#">Bike 8</a>
  20:              </div>
  21:              <p>COMPUTERS</p>
  22:              <div class="section">
  23:                  <a href="#">Computer 1</a>
  24:                  <a href="#">Computer 2</a>
  25:                  <a href="#">Computer 3</a>
  26:                  <a href="#">Computer 4</a>
  27:              </div>
  28:              <p>OTHERS</p>
  29:              <div class="section">
  30:                  <a href="#">Other 1</a>
  31:                  <a href="#">Other 2</a>
  32:                  <a href="#">Other 3</a>
  33:                  <a href="#">Other 4</a>
  34:              </div>
  35:          </div>
  36:  </asp:Content>


As you can see there's nothing fancy about the mark up above.. Now lets go ahead create a simple CSS to set the look and feel our our Menu. Just for for the simplicity of this demo, add the following CSS below under the <head> section of the page or if you are using master page then add it a the content head. Here's the CSS below:


   1:  <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
   2:  <style type="text/css">
   3:      #Menu{
   4:          width:300px;
   5:      }
   6:      #Menu > p{
   7:          background-color:#104D9E;
   8:          color:#F5F7FA;
   9:          margin:0;
  10:          padding:0;
  11:          border-bottom-style: solid;
  12:          border-bottom-width: medium;
  13:          border-bottom-color:#000000;
  14:          cursor:pointer;
  15:      }
  16:      #Menu .section{
  17:          padding-left:5px;
  18:          background-color:#C0D9FA;
  19:      }
  20:      a{
  21:          display:block;
  22:          color:#0A0A07;
  23:      }
  24:  </style>
  25:  </asp:Content>


Now let's add the collapsible effects on our menu using jQuery. To start using jQuery then register the following script at the very top of the <head> section of the page or if you are using master page then add it the very top of  the content head section.


<script type="text/javascript" src="" ></script>


As you can see I'm using Google AJAX API CDN to host the jQuery file. You can also download the jQuery here and host it in your server if you'd like. Okay here's the the jQuery script below for adding the collapsible effects:


   1:  <script type="text/javascript">
   2:      $(function () {
   3:          $("a").mouseover(function () { $(this).addClass("highlightRow"); })
   4:                .mouseout(function () { $(this).removeClass("highlightRow"); });
   6:          $(".section").hide();
   7:          $("#Menu > p").click(function () {
   8:              $(this).next().slideToggle("Slow");
   9:          });
  10:      });
  11:  </script>


Okay to give you a little bit of explaination, at line 3.. what it does is it looks for all the "<a>" anchor elements on the page and attach the mouseover and mouseout event. On mouseover, the highlightRow css class is added to <a> element and on mouse out we remove the css class to revert the style to its default look. at line 6 we will hide all the elements that has a class name set as "section" and if you look at the mark up above it is refering to the <div> elements right after each <p> element. At line 7.. what it does is it looks for a <p> element that is a direct child of the element that has an ID of "Menu" and then attach the click event to toggle the visibilty of the section.

Here's how it looks in the page:

On Initial Load:

After Clicking the Section Header:


That's it! I hope someone find this post usefu!


Posted on Friday, February 4, 2011 5:02 PM ASP.NET , JavaScript | Back to top

Comments on this post: A Simple Collapsible Menu with jQuery

# Collapsible Menu
Requesting Gravatar...
Collapsible Menu is actually handled by the HTML in our web page. Simply by assigning appropriate classes and ids to the various parts of our HTML.
Left by Car title loans irvine on Jan 12, 2012 2:32 AM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: