jdMenu for jQuery saves time
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:
<a id=”NM1″ href=”/about_bso/index.cfm” title=”Inside BSO”><span>Inside BSO</span></a>
<a href=”/about_bso/dle/”>Law Enforcement</a>
<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>
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:
After we’ve include jdMenu, the next step is styling the menu with some CSS:
margin:85px 0px 0px 15px;
margin:0px 7px 0px 0px;
#navigationmenu a span
/* — Sub-Menus Styling — */
margin: -2px 0px 0px 4px;
border: 1px solid #9f896b;
#navigationmenu ul li
padding: 3px 10px 3px 4px;
border-top: 1px solid #9f896b;
border-bottom: 1px solid #9f896b;
#navigationmenu ul li.jd_menu_hover
#navigationmenu ul a
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:
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.