A Simple Collapsible Menu with jQuery
- by Vincent Maverick Durano
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="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></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"); });
5:
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!
Technorati Tags: ASP.NET,JQuery,Master Page,JavaScript
