I love making dynamic menus of all kinds, and trying to find ways to merge various forms and sorts of dynamic menus. What I don’t like is making menus that rely on any code other then CSS. It’s a personal preference of mine as I find that it keeps site speed faster. Now understand, often it doesn’t scrape off a lot of time, but for image-heavy sites every little bit counts.
There is a nifty version of the horizontal menu called a “Sliding Doors” menu. In this the background image(s) are set up so that they grow or shrink with the size of the text. This keeps your Menus looking beautiful and retains their dynamic styling even when text is expanded greatly.
A List Apart, one of my favorite resources, has an interesting take on the sliding door menu style. Yet as I was working on the newer version of my own menu, I decided to test the CSS to make sure everything validated properly. I was surprised to find that in the CSS 2.1 validation that an error occurred. It wasn’t a critical error and was more of a specific need for the CSS level of validation as per the W3C rules for CSS 2.1, but it was enough to make me wonder.
For me to validate “clear” (with no Errors at all) I had to add a width selector to part of the CSS Style for the menu. Apparently a float requires the width selector to be within the same style.
#main_nav li {
float : left;
width : auto;
margin : 0;
padding : 0;
background : url(../images/right_menu_border.png) no-repeat right bottom;
}
In the tutorial from A List Apart this wasn’t listed, and to be honest it’s not entirely necessary (at the time of this article) because leaving it out doesn’t effect the code’s function. It’s merely needed in order to validate the CSS for level 2.1 in the clear.
By Adding auto to my width selector I filled in the requirement for clear validation without effecting my layout.
