Rip's Domain

jdMenu for jQuery saves time

Posted in Jquery by rip747 on February 11, 2007

If you’re reading this blog, then you’re either a web designer or a programmer, so it’s safe to assume that at some point in your career you have had to do a navigation menu. Way back when, adding a navigation menu to a site was a pain in the neck and took a long time. The whole reason was that JavaScript just wasn’t what it was today about 5 years ago and finding any sort of premade plugin was a crap shoot. Sure there were some people that would “roll their own”, the purists as I call them, but I just don’t have the time to sit there a fight with browser inconstancies and hacks to get the menu to work.

Way back in 2000 when I originally redesigned sheriff.org. I used a menu system that I got from some JavaScript download site as a starting point. It was hard to use, hard to configure, hard to style, it sucked. It took me about 3 days to get the thing working the way I wanted it to. I never wanted to do something like that again. The menu used tables (yuk!) to do the navigation and a bunch of hacks to get it to lay in properly within IE5.5.

Fast forward about 6 years: Sheriff.org is getting a face lift and a big clean up. The original layout was done in tables and for this rework, I wanted to use pure CSS and XHTML Strict. Well I’m happy to say that the rework is almost finished and I thought I share with you how I use jQuery and jdMenu to a menu in about 10 minutes. It’s not completely done, since I’m waiting for the designer to give me the rollover images, but you’ll get the idea.

First here is an excerpt of the mark up for my menu. I’m not going to post the whole thing as it isn’t need for you to get the idea. The excerpt goes with the screen shots to follow:

<ul id=”navigationmenu”>
<li>
<a id=”NM1″ href=”/about_bso/index.cfm” title=”Inside BSO”><span>Inside BSO</span></a>
<ul>
<li class=”daddy”>
<a href=”/about_bso/dle/”>Law Enforcement</a>
<ul>
<li><a href=”/about_bso/dle/districts”>District Offices</a></li>
<li><a href=”/about_bso/dle/units”>Special Units</a></li>
<li><a href=”/apps/missingpersons”>Missing Persons</a></li>
<li><a href=”/about_bso/other/most_wanted/”>Most Wanted</a></li>
<li><a href=”/about_bso/dle/comm”>Communications / 911</a></li>
<li><a href=”/about_bso/dle/civil”>Civil Division</a></li>
<li><a href=”/about_bso/dle/command”>Command Staff</a></li>
<li><a href=”/about_bso/dle/explorers”>BSO Law Enforcement Explorers</a></li>
</ul>
</li>

Nothing big, just an unsorted list with sub lists to make up the menu. You notice that I give the top menu element an ID and wrapped the text within the anchor tag within a span tag. This is so I can use jQuery to substitute the text in the anchor tag with an image. It’s a little more mark up, but fully cross browser compatible and real easy to do.

The “li” with the class of “daddy” are sub menus that have sub menus (you’ll see in the screen shot). The “daddy” class is used to give these items a small arrow next to them to tell the visitor that there are more links.

Here is a screen shot of what the menu looks like after using jQuery to substitute the anchor text with images:

menu

Now that we have that working, we will use jdMenu with jQuery to form the rest of the menu. All we have to do is include 2 lines of javascript in our HEAD section to get jdMenu working.

<script type=”text/javascript” src=”/_files/js/jdmenu/jquery.dimensions.js”></script>
<script type=”text/javascript” src=”/_files/js/jdmenu/jquery.jdMenu.js”></script>

After we’ve include jdMenu, the next step is styling the menu with some CSS:

#navigationmenu
{
position:absolute;
margin:85px 0px 0px 15px;
list-style-type:none;
z-index:100;
font-size:11px;
line-height:13px;
}

#navigationmenu li
{
float:left;
margin:0px 7px 0px 0px;
}

#navigationmenu a span
{
display:none;
}

#navigationmenu ul
{
display: none;
}

/* — Sub-Menus Styling — */
#navigationmenu ul
{
position: absolute;
display: none;
list-style-type: none;
margin: -2px 0px 0px 4px;
padding: 0px;
border: 1px solid #9f896b;
background:#9f896b;
cursor:pointer;
}
#navigationmenu ul li
{
float: none;
margin: 0px;
padding: 3px 10px 3px 4px;
width:175px;
color: #000000;
background-color: #c1af96;
border-top: 1px solid #9f896b;
border-bottom: 1px solid #9f896b;
display:block;
}
#navigationmenu ul li.jd_menu_hover
{
background-color: #f1e8d2;
}

#navigationmenu ul a
{
text-decoration:none;
color:#000000;
}

#navigationmenu li.daddy
{
background: #c1af96 url(/newimages/smallarrow.gif) no-repeat right center;
}

After using jdMenu, jQuery and a little CSS, our menu now look like this when you mouse over the “Inside BSO” image:

jdMenu

By using jQuery and jdMenu, I saved myself a ton of time, the menu is easy to add to and manage and degrades nicely if someone with an older browser comes to the page.

Hopefully this post seduced you into checking out the awesome plugins available to jQuery.

One Response

Subscribe to comments with RSS.

  1. Shmuel said, on March 26, 2008 at 9:21 pm

    Where is the jdMenu code invoked on a certain element? How does it know to target that particular ul?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: