Website navigation menu examples

Posted in Inspiration Web design on 5 February 2011 | Comments

Website navigation menus are a fundamental part of any website and it’s easy to code these with CSS so that they look attractive and provide accessible links for your visitors and search engines. I’m always on the look-out for good examples of website navigation and here are some that I’ve seen recently.

• Channel Four News has a horizontal navigation menu that is fixed at the bottom of the screen and ‘docks’ with the footer area when the page is scrolled to the bottom. Clicking on each menu item opens a large panel to show other links and a summary of the content in each section of the website. It’s a nice method because the the main page areas are given over to the page content but the navigation and related information is available at all times if you need it.
• On CSS Wizardry, the left hand menu is fixed which means that, like the above example, it stays in view. I’m seeing more of this type of menu recently and it works well when the left column is free of other content.
• I’ve mentioned the Alinga website before and it’s a great visual design. It also has ‘pop-outs’ for the top menu navigation buttons that I’ve not seen before.

Even the simplest navigation menu can be enhanced. One way of doing this is to add CSS transitions to the mix. Normally, changing the background instantly with an a:hover style sheet rule is the standard treatment but you can add a subtle fade-in transition quite easily. I think this adds a nice effect and it’s what I have on CVW Web Design, where the menu link background color fades in over 0.2 seconds.

I think all the examples work really well. Let me know any other good examples you may have seen in the comments below.

Website inspiration - 28-11-10

Posted in Inspiration on 29 November 2010 | Comments [1]

Here are four websites that I’ve come across in my web travels which ( I think) are fantastic designs. Perhaps for different reasons but all great nonetheless. Read on for more details and why I think they are so good.

Read more ...

Website inspiration: Colour and coffee

Posted in Inspiration Website review on 28 December 2009 | Comments [1]

I collect website screen shots in a Flickr set called Website Inspiration. I use the screen shots to remind myself of some fantastic website designs that I see on my travels round the web. Each design has aspects that I love, for example the colour scheme, the typography, or even one specific element that I think works really well. I have never really featured the websites or screen shots on this blog in any detail so this is the first of what I hope will be a series of regular posts that highlights some outstanding website designs. Up this week are Rainbeau Mars and Art in My Coffee

Read more ...