25 Modern Navigation Solutions

Navigation is an important element of web design, and of any website. It is the one thing that allows the user to get around the website, and is often the element in web design that gets the most attention when it comes to organizing an effective user interface.

Internet Dreams

Internet Dreams features one of the most modern and well-proven methods for creating primary navigation. It's just a simple horizontal navigation near the top of the page, right under the logo. In terms of "out-of-the-box thinking" there is nothing too special here. However, it is included on this list because it is a fantastic example of how a simple navigation design solution can be done so elegantly.

The overall layout may be all too familiar, which is great for consistency across the web. However, we can see that the designer went into a lot of detail here. Everything from the texture, to the divider lines, and even the gradient on the active/hover states is perfect down to the last pixel. The modern gradients and textures also give it a creative edge.

The Whitehouse

The White House's website is very content-heavy, but it wouldn't seem like it at first glance seeing how there are only seven navigation topics up top. However, when one hovers over any of the menu items, we can see how much content there really is. Drop-down lists are nothing new to web design, but what makes this navigation so smart is the column-organized links.

On most of the drop-downs, the links are separated into two columns, and in some three columns. Instead of spanning vertically a ways down the page, the hover state mixes horizontal and vertical space to save space overall and also helps the viewers to skim the links for better readability.

Cognigen

We loved this navigation solution because of the cool design effect, and how depth is added to the design with just this simple feature. The rest of the design is fairly flat, with no gradients, drop-shadows, or other design features that would add depth. This helps the navigation stand out even more, and prompts the viewer to keep checking back up at the navigation to find more as they browse through the content. The hover states are pretty unique too, and are well worth checking out.

Via : http://www.onextrapixel.com/2010/12/13/25-modern-navigation-solutions-unique-designs-awesome-effects/