Friday, July 16, 2010

jQuery Plugin for a navigation menu

There are probably a million other ways to make yourself a navigation menu. This is my $0.02. Importantly, thanks to the Open source community, John Resig, the JQuery team and the JQuery UI team.
Now, I do not know if there was a need to use javascript to create a navigation menu. It can be done with CSS, I know, but JQuery UI is all about using JQuery to manipulate CSS. So, I gave it a shot. Besides JQuery is plain fun !

Motivation: I wanted to achieve the tabbed view like the one in JQuery UI tabs across multiple web pages for a web-site that I was working on.
Solution:
The core JQuery and Jquery UI and JQuery UI CSS files. They can be downloaded from the JQuery UI site.
The navbar (thats the name I gave it!) plugin file can be downloaded from here.
Required Skills: Intermediate JQuery, HTML, CSSUsage
HTML:

<div id="navbar-container">
<ul id ="navbar">
<li id="page1_link"><a href="mockup_1.jsp">Home</a></li>
<li id="page2_link"><a href="mockup_2.jsp">About</a></li>
<li id="page3_link"><a href="mockup_3.jsp">Contact</a></li>
<li id="page4_link"><a href="mockup_4.jsp">More</a></li>
</ul>
</div> 

JQuery/JavaScript:

$("#navbar-container").navbar("navbar,page1_link,page2_link,page3_link,page4_link, 1");

You will need to add the above jquery/javascript to every page. All the arguments in the call remain the same except the last one, the number. This number indicates the item (li element) on the navigation bar that should be selected. Here,
<li id="page1_link"><a href="mockup_1.jsp">Home</a></li>
will be selected. It should look like this:







  




(I have used the new JQuery UI buttons for the sidebar. More about that later.)
So, for an other webpage, you will need to call navbar() with an appropriate number as its last argument.
i.e. if it is about.jsp, the call will be $("#navbar-container").navbar("navbar,page1_link,page2_link,page3_link,page4_link, 2");

Hope this was useful.
Useful Resources:

No comments:

Post a Comment