WebAppers

/ best free open source web resources /

Shopify

Create a Simple Navigation with a Horizontal Subnav

Posted · Category: 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.

Horizontal Menu

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/horizontal-subnav/
License: License Free

5 Comments
  • GC

    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?

  • ruluk7

    Looks nice but is technically not very clean because the subnavigation is not a list. Which makes the whole thing inaccessible…

  • http://www.thatwebguyblog.com ThatWebGuy

    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.

  • http://www.toiraq.com omar

    thank you its very useful

  • Nagmani Bhushan

    link not working :(

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons