A Simple Collapsible Menu with jQuery
Posted
by Vincent Maverick Durano
on Geeks with Blogs
See other posts from Geeks with Blogs
or by Vincent Maverick Durano
Published on Fri, 04 Feb 2011 09:02:34 GMT
Indexed on
2011/02/04
15:26 UTC
Read the original article
Hit count: 205
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!
© Geeks with Blogs or respective owner
