Created a tabbed menu today .. something I've been meaning to do for ages.
The menu displayed at the top of the homepage is pure-CSS driven (no images used). Using images would allow for more creativity, but would also add to the page's download-weight. (And I use enough images already .. in the daily entries.)
My goal was to design a tabbed menu that was both simple & functional. I'm pleased with how it turned out .. tho it took a surprising amount of tweakage to get it to look the way I wanted.
Now that I've developed a basic format, I can tweak & adapt as necessary.
Might look simple, but centering that menu had me jumping thru hoops. I reviewed several methods and finally decided to modify Ethan's approach .. so it would resemble the cleanness of Eric Meyer's tabbed navbar (which is not centered).
••• today's entry continues here below •••
I modded the XHTML (& CSS) to eliminate using an extra div (divitis). Also had to add the following attribute/value to the CSS » height: 19px .. to eliminate a 1-pixel black line that appeared between (separated) each tab and the 2-pixel green bottom border just below (which runs the entire length of the middle column) .. in non-IE browsers. And we're still Strict.
UPDATE 26.Oct.2009 - Had to change the 19px height property to ems .. 1.462em (19px/13px = 1.462em) .. in order to eliminate the 2px bottom border from leaving the bottom of the tabs when the user font-size was changed.
Now I need to create a separate page that indexes all the guides .. so I could include that link in my new menu .. and clean up the home page. But that's another day. Gotta do my taxes now. =/
I also have some ideas for the top heading area (white background). Have collected some cool images that I could composite to create a cool background.
For more along these lines, here's a Google search preconfigured for the query » css tabbed menu centered
In other news, I've been researching the MODx CMS, but we'll leave that for another entry.
