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.
I had to make the changes:
…and renamed all of the rest…
Some helpful debuggers:
And I wish that I had known about the Nav-o-matic before I created my own sprite-based navigation bar….