10 Sep
Posted by Ray Cheung as License Free, Menu
Would you like to create a Simple Navigation with a Horizontal Subnav? It looks very similar to the Menu of Behance Network, which looks nice and professional.
We can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds. Nice and simple! I am sure this will come in handy in your future projects.
Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/horizontal-subnav/
License: License Free





Nice work, looks very sharp. However, I notice in Safari that the sub-menu doesn’t always stay visible when dropping down from the main menu to the sub-menu; kind of frustrating on an otherwise great looking menu! Any ideas of how to fix this? Would it be related to the 1px border between the main and sub-menu?
Looks nice but is technically not very clean because the subnavigation is not a list. Which makes the whole thing inaccessible…
I’ve never been a fan of this type of navigation. Testing with some elderly users and the had difficulty sticking to the very narrow amount of movement these types of menus allow. You have to be reasonably precise when moving the mouse pointer along the horizontal axis. Even I personally don’t find them very usable.
A traditional sub-menu that simply lists all the items straight down is much more forgiving because they are typically wider and of course you’re only moving the mouse one direction – down. Not down and across. Seems counter productive to make navigation harder to use.
Also, and this is just this particular implementation of this menu you have in the demo, it’s not exactly the most semantic thing I’ve seen. The sub-menu items should preferably be listed like the root items are (in an unordered list).
It looks nice though.
RSS feed for comments on this post · TrackBack URI