Posts Tagged ‘css-based menu’

Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in.
Below we present over 10 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites.

  • Nopokographics8
    Vertical navigation menus are used very rarely, for the simple reason: they are harder to use. However, some designers risk unusual approaches. Nopoko Graphics uses an arrow and a hover-effect for its vertical navigation menu.

    drop-down-menu-1

  • Cosmicsoda10
    This large and colorful menu is very noticeable and uses a slight hover effect to further define the menu items.

    drop-down-menu-2

  • Clearleft14
    Clearleft uses a couple of paper pieces for its navigation.

    navigation-menu-3

  • Water’s Edge Media19
    Patricia Abbott uses clothespins for the navigation options.

    dhtml-menu-4

  • Jeff Sarmiento24
    Why not try a sloping navigation options once in a while?

  • Mac Rabbit
    One more example of a large and clean menu. This one uses icons to aid the reader in recognizing each item’s function.

  • DFW UPA34
    Icons reinforce the menu items on this website and add emphasis to each option.

    menu-samples-7

  • Duarte Pires36
    This menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.

    menu-templates-8

  • Eric Johansson42
    Eric Johansson, a designer from Sweden, uses tall vertical blocks and images for his navigation.

  • Bern45
    I am a big fan of this navigation layout. I like how the menu fits in with the grunge theme. It also uses another jQuery drop-down effect.

The article is from smashingmagazine.com.