Menu
Carl Camera

CSS Flyouts

I've made a minor redesign change to my company site, switching it over from hand-coded ASP to Vine Type. Part of why I didn't do this earlier is that I had flyout navigation in place.

Technorati Claim Technorati Profile

Now with the release of Vine Type 0.98, I can use the $_nav_map template variable where my navigation goes, then employed nickrigby-style css flyout technique (with some Eric Meyer thrown in ) to create the flyout menu. As I add pages, the flyout expands automatically.

In my case, I'm limiting myself to two levels deep (the site is not that large) but with a couple adjustments it could support three or four levels. Take a look! http://vinebranches.com

And I should mention something -- standard nickrigby flyout CSS includes additional selectors so IE will invoke :hover behavior. Vine Type comes with builtin IE :hover support (and IE PNG transparency support) in the form of this CSS selector:

@import url(../behaviors/behaviors.css);

So where the nickrigby example shows this...

ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul 
{ display: none; } /* Hide sub-menus initially */

...we can remove the references to the class ".over" (that's how Nick invokes IE behavior code) and use only the native :hover selectors. It's a little cleaner. And of course on my site, I used a div id of "nav" not "primary-nav" so my correlating CSS selector looks like this...

ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul 
{ display: none; } /* Hide sub-menus initially */

...and accomplishes the same thing. And of course, every page is valid XHTML.

Comments

Of all CSS menus, the two you cited are my favorite too.

Milan Negovan 06 Jan 2006

Hey thanks, Milan! There certainly are plenty of solutions out there. I'm not sure why I gravitated to those two.

Vine Type intentionally over-marks-up its pages so that the designer is given several options on styling. I'm always wondering whether I've done "too much" or "too little." Hopefully these two flyout/drop-down solutions will suit the needs of the designer community.

If not, then there's always the next release!

Carl Camera 06 Jan 2006