Website navigation menu examples

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.