Ajaxular - All Things AJAX

Over at Smashing Magazine they have posted a good article on navigation menu trends. The post does a good job of covering quite a few styles of navigation menus. I recommend this post if you are making a website or web application and are working on the navigation.

Below is an excerpt from the article.

Experimental solutions

Although it’s usually not the best idea to come up with some strange and/or unique site navigation, designers tend to risk crazy and uncommon experiments. When trying out something new, make sure that you don’t put the usability of your site in danger by creating unnecessary barriers for your visitors. Any navigation menu fails if users can’t make sense out of it.

DesignForFun uses icons to help visitors to filter the content they’re looking for. Depending on the clicked icon the background of corresponding links changes. However, the selection of icons may be not the best one as it’s unclear hat icons stand for. Fortunately, title attribute is in use.

Interesting concept: the hover-effect on jBunti depends on the selected month of the year. Warm months are associated with reddish colors, cold months with blueish colors. 12 hover-colors in use.

Playground Blues tries out something completely different; each of 12 site sections has its color in the left sidebar. Once the visitor hovers the mouse arrow over the left-hand sidebar the icons pop up providing visitors with navigation options. Title-attribute is used as well. And to make sure visitors actually can find the navigation the icons pop out like harmonica first time the page is loaded.

Steven Holl is an architect. Which is why his navigation menu looks like an architectural sketch. Each navigation option is given some weight in the map — apparently according to its weight on the site.

Polkdesign uses a calender as the central navigation element. Flash.

Hopkingdesign offers not a tabbed-navigation; it’s a vertical navigation placed at the top of the page. Looks at least unusual.

No, Adipintilie.eu has navigation options also placed at the top; however, these are only external links.

Flash-based 3D-effect used on Gol.com.pl. The menu can also be expanded.

The navigation on Wards-Exchange.co.uk fits to the brochure design. Or the other way around.

On Kriesi.at the hovered navigation option is dynamically expanded and shows the icons which illustrate what to expect in the section of the site. The effect is in this case not necessary.

Not really new, but still beautiful. Folietto.at uses the free area effectively and sparingly. You may notice an interesting visual effect when hovering the links.

inBloom has a menu with animation. The beetle doesn’t care what option you choose, it crawls its long path through the navigation tree anyway. This is an example of how animation can be unobtrusive.

Cobahair.co.uk uses only BIG typography…

…and HelloColor.com uses small typography with rainbow colors.

Carbonstudio.co.uk delivers a Flash-based navigation menu with sound-effects. It may sound annoying, but it isn’t: every navigation option has its own sound. If you train yourself a little bit you can even play your own melody while listening to birds in the background.

Maxandlous.com provides hover-effects with visual hints. It looks nice and unusual.

Scrollomania in all possible directions on Letters-Numbers.com.

OK, how can you come up with this one? Nickad’s Flash-based construct becomes visible only if the mouse is clicked and remains being clicked.

Nike offers a kind of remote control. To navigate you need to click and drag. While dragging, move the mouse up to move forward, down to move backward, and left/right to turn.

You can read the full post here.

I think it is always good to see what trends are going on in the web as it can give you good ideas for your own development. If you use any of the techniques in this post I would love to hear about them, you can either leave them in the comments or write a full blog post about them on this blog with your free Ajaxonomy account.

---