Sprites, Mega Drop Downs, SubMenus and jQuery = head vs. wall

I’ve been working on my wife’s new fashion photography blog and portfolio. I haven’t been through the paces of creating a site top to bottom since 1998 but thinking “how hard can it be to make a WordPress site”, I volunteered to setup the blog and portfolio. But since I’m not a designer, CSS champion, Photoshop pro, Actionscript ace or Javascript junkie, it’s been quite a challenge. A designer emailed the Photoshop files and I’ve been tearing my remaining hair out ever since.

I’ve had quite a few battles trying to get the site up and running (tales for another campfire). But my nemesis, my Xeres, my wall for bashing my noggin, was the navigation bar (hereafter known as NavBar). Something so simple as a rollover menu (perfectly spaced, with a hover image and drop-down menu) drove me insane. I fought four epic battles against NavBar before it finally succumbed to my tenacity (and a lot of Google-help).

My first attempt was to make a background image and CSS NavBar by positioning an unordered list over the image. But that didn’t really work – I couldn’t control the position very well, the background image floated around, the drop-down menu didn’t align quite right, etc. Or if the hover was set to a width, the whole NavBar would jump, jump, jump around like a House in Pain. Sorry – no examples. Just believe me on this.

Next up was the Sexy Drop Down Menu. I mean, c’mon, it’s sexy! Wrong. I think that I must have tried two iterations before I finally gave up. It was mostly working but I could never get the drop-down menu to line up correctly or fade in/out. And it turns out that the problems I ran into were the same issues that finally led me to shoving my head deep into the mouth of the Trojan horse called jQuery to get the NavBar working.

It was time for drastic action! I wanted a slick rollover. I wanted centered hovers. I wanted a beautiful menu image for current pages. And I really wanted a beer or two. It was time to go back to my Nintendo days and re-learn about sprites! If only the Spartans had sprites and not super-ripped abs! I don’t even know how I found CSS Text based navigation bar with images and How to Make a CSS Sprite Powered Menu – I must have been in some delirium after I had bitterly removed 134 lines of CSS code for the non-working NavBar.

So that helped. A lot. Everything lined up nicely. Hovers and current pages worked. But drop-down menus?!? Good luck with that! I searched for hours trying to find an example of a drop-down menu working with a sprite image. Finally, five pages deep into some Google search (btw – Bing was no help at all), I found my Excalibur (yeah yeah, I’m bouncing all around time periods), the Mega Drop Down Menus w/ CSS & jQuery example. This was it! I felt a new wind blowing from the south (or was that just the fog from the west?). I threw on plate of armor, grabbed a Titansteel Destroyer (to open another beer), hopped into a Sherman tank and went to work. Everything went fine except that the sub-menu didn’t work. Since Firefox wasn’t throwing an error, I brought up the site in IE (imagine that, it’s actually useful for debugging). IE was throwing the error: “Object doesn’t support this property or method” on the very first line of the Mega Drop Down Javascript “$(document).ready(function()”. Turns out this error message is completely useless. Many others have gone down this rabbit hole – see Object doesn’t support this property or method – Javascript Error.

Whack! That was my head against the wall again. I spent a late Saturday night trying to figure out where the Javascript and/or CSS was breaking. Nada. Finally, reading through the +190 Mega Drop Down comments led me to Using jQuery with Other Libraries. It turns out that the functions used by the Mega Drop Down were conflicting with other jQuery libraries used by WordPress! And was breaking the WordPress plugin NextGen Smooth Gallery. Ouch!

I had to make the changes:

…and renamed all of the rest…

moved the JavaScript to the footer (to make sure the classes load) and everything worked! And after many, many, many rounds, the NavBar was defeated.  I think that the final score was something close to My Head 15 vs. Big Wall 13.

Some helpful debuggers:

And I wish that I had known about the Nav-o-matic before I created my own sprite-based navigation bar….


2 comments to Sprites, Mega Drop Downs, SubMenus and jQuery = head vs. wall

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>