Hybrid CSS Menu

If you have never seen the CSS work of Stu then you are missing out. He has numerous examples of pure CSS vertical and horiztonal navigation samples. After looking at his CSS demos I decided to try and combine an CSS vertical dropdown with a CSS horizontal dropdown. How both? It’s very simple. My original idea came about because of usability concerns about horizontal dropdown menus. The issue is typically to access the subnavigation a user must hover the main nav section and then move down and the to the left or right to reach the desired subnavigation link. Because CSS won’t let you do any type of hover delay, if a person moves diagonal to try and shortcut to a subnav the hover state is lost and the nav dissappears… only to force the user to begin the process over.

To try and resove the issue I combined this reasoning to why a regular CSS vertical dropdown menu is a quicker navigation. So if you are in an active section the subnav is a dropdown horizontal menu. If you hover over a primary nav which is not the active section the the dropdown switches to a vertical. The joy of this method is it allows you to show the active sections submenu all the time, while also allowing for the easier vertical dropdowns in the other sections. The secret lies in the class=”unselected” vs class=”selected”. This is what switches from the vertical vs horizontal submenu.

Nothing super exciting? Well considering it works in IE6, IE7, Firefox, Safari, and Opera. I’ve very pleased. Yes there are a few hacks for the IE browsers. To be honest with the introduction of IE7 which is more CSS compliant but still behind the curve, the trend of a few hacks will continue for some time.

I believe by now Stu (his CSS Menu demos) has come up with original versions of the basic horizontal and vertical dropdown navigations demos that a more universal for all browsers. I haven’t specificallly checked to see if my version can be simplified to adopt these changes or not.

Again I thank Stu for his wonder CSS menu work.

View my hybrid CSS navigation demo.