Top 10 Navigation Menus

June 25, 2008

The navigation menu is a fundamental part of a web design, no longer is it okay to simply have a load of hyperlinks linking to the different main pages of a website. It is now normal to see hover effects on menus and in this collection I am going to show you my favourite 10 I have seen over the past month. Enjoy!

Continues below...

Behance | Click to view site

The behance.net menu is one of my very favourite, the colours used are an amazing choiceand the tab effect on the menu makes it a lot easier to navigate than say a drop down menu.

Apple | Click to view site

Apple has always been one of the leaders in design and this menu really compliments this idea. I expecially like the engraved look on the text and the way that apple use their logo as the homepage link.

Jive Software | Click to view site

What I love most about this menu is the hover effect, its sharp and similarly to Behance the colours complement each other very nicely.

OurMemoryOf | Click to view site

I like the way that the menu stands out with the use of the drop shadow and the hover effect is very nice with the use of the arrow pointing into the page, nice effect.

FreelanceSwitch | Click to view site

A technique that is starting to spread is the two line navigation menu and FreelanceSwitch is a great example of this. I like the way that the hover effect just makes the text stand out more.

Baritchi | Click to view site

Not quite a navigation menu that you see on every page but the homepage of Baritchi deserves a mention in this list, some great effects on this page make it a pleasure to use, the simplicity of the website design as well makes the navigation menu stand out a lot more.

Design Militia | Click to view site

Another example of the 2 line navigation menu, Design Militia is a lot simpler than the FreelanceSwitch example but still has a very good effect. Is it just me or are you noticing a lot of these menus are using a similar colour scheme, bright blue and dark gray (hmmm).

Simple.art | Click to view site

Luckily this isn’t the only navigation menu, theres a text based one above the image, but its still quite a nice effect to have it on the image as well. This is a nice site design by the way, so check it out if you have time.

Navigant Consulting | Click to view site

This i smore of a funkier menu but still very nice, I especially like the semi-transparent drop down menu, and the use of different colours, orange, green and blue.

Karim Zurita | Click to view site

Image based menus work really well sometimes and this is an example of a great looking one. The clean look and engraved effect between each icon really makes it look professional along with the great looking icons themselves. It is positioned nicely in the top center of the page with the logo underneath making it clear that it is a navifation menu.

Simon North

Hi, my name is Simon North and I run Help Developer. I am a freelance web designer based in Huddersfield, on top of my freelancing I also attend Huddersfield University reading Software Development. ----------------------------------------------------------------------------------- Find me on: Facebook - Twitter

View Author's Website

QUICK TIP

Chrome is Crashable

The so called un-crashabale browser IS crashable. No, I’m not talking about 1 tab, not a process, or even the about:crash Easter egg. Without even needing to press enter, or click GO, just type :%. No period. Just a colon, and percent sign. EVERYTHING crashes. Make sure you aren’t doing important stuff.

Back Button To Big?

If you using Mozilla Firefox, you might not be liking that new, unusual over sized back button. While keeping other icons at a nice, easy to navigate size, just go to Customize on the bar, and select “Use Small Icons”.

FireFTP

A lot of people use applications to update their websites via F T P. However, they tend to be bogged down with all sorts of tools which the majority of people don’t need.

FireFTP is a great addon for Firefox which allows you to FTP direct from the browser, quickly and easily, and you can create folders and change permissions with ease.

Remove border from links

Have you ever noticed them dotted lines around links when you click them in Firefox? To get rid of them simply add the following CSS:

a:active, a:focus {
outline:none;
-moz-outline-style:none;
}

COMMUNITY

Marta Dahlig - digital painter

Marta Dahlig is one of the most known deviants on deviantart.com with nearly 4 milion views on her profile and who knows how many on all her deviations. She is known for her 7 deadly sins drawings of women.

Space Glow Wallpaper Tutorial

In this tutorial you will learn how to make a space scene from scratch, create glowing effects, and glowing shapes.

Red themed CSS and Flash design gallery - Part 1

I’ve decided to make the web design showcase themed as it is more easy to find what you are looking for. You will be surprised but there aren’t many quality red CSS and Flash sites. I’ve gathered in this showcase article 22, and 23 more are waiting for the release of Part 2 so they can show off their red design.

Kerem Beyit - digital painter

Kerem Beyit is a digital painter from Turkey. Besides the usual werewolves or the dragons from his drawings done in Photoshop you will also see interesting and mystical characters. The quality of his drawings made him receive awards and recognition from the computer graphics communities like CgSociety, CgChannel, CgGallery, 3DTotal and CgArena.

40+ Beautiful Hand-Drawn Websites

Hand-drawing websites are very popular on today’s design. CSSBuilt.com collects 40+ hand-drawn websites for your inspiration. Be inspired and enjoy!

Design blogs with Flickr Groups

Come join and share your work with the rest of us.

Best Photoshop tutorials of October on Design your way

A little bit late for this article but had to be here. It’s some kind of selection “best of the best” if you want. You’ll see in the following list articles that’ll teach you how to work your magic with Adobe Photoshop in illustrations, digital drawing, photomanipulation, typography and even on a blog design.