CSS Navigation: Tutorials, Examples & Free Downloads

March 24th, 2009 Posted in CSS

Navigation is arguably the most important part of a website (after content of course). Without a good navigation, your visitors will have difficulty finding their way around your site. If a visitor can’t find your sales page, you won’t make a sale. If a visitor can’t find the content they want, they won’t stay long.

You can create your navigation in many different languages and styles, ranging from a simple HTML list of links, to a complex JQuery menu with animation. CSS is most commonly used because it offers some functions HTML alone cannot provide while remaining supported by all major browsers. The hover effect (mouseover) changes the color or design of your links when the mouse is moved above the link thus highlighting the link and making it easier to see which link is being clicked. The active link effect allows the link for the page you are on to stay highlighted. This allows you to tell what page you are on at a glance, and eliminates the confusion of clicking the link for a page you are already on.

Many different styles and ways of creating CSS navigation menus have been developed over the years, but I hope to cover the main ones, from simple to complex.



While Suckerfish may seem simple and basic to look at, it was one of the first menus of it’s kind. Many menus today are based off the Suckerfish <li> design style. For example, Son of Suckerfish, Superfish etc. You can make a great looking and working menu using the Suckerfish code.

Example: Here

The Art of Navigation:

This menu, designed by Dan Rubin is an excellent lesson in usability. As designers, we should focus more on how ease it will be for a visitor to use rather than how cool or unique it looks. Of course, a design that combines a simple user interface with a unique design is best, but you should always consider the ease of use first. Dan Rubin’s Art of Navigation is easy to use. The way your link is selected leaves no doubt in your mind that you are going to the correct link.

Example: Here

Inverted Sliding Door:

Sliding Door is a simple tab style design that is simple, but clean and easily modifiable. It uses a total of 4 images to keep load times down and is highly effective.

Advanced CSS Menu:

Nick La of N. Design Studio goes through step by step how to create an artistic and unique illustrated CSS menu. This is not a specific menu you can add to any website but rather direction and guidance to help you create your own exactly to your liking.

Example: Here



Here are some examples of what you can do with CSS menus. Source code is not available for any of these menus and they are likely copyrighted. These are intended as a mini gallery of CSS menu design and inspiration.

Free Downloads

Although a couple of these menus are for sale, 13styles offers some amazing free CSS menus ready for implementation.


Author -

who has written 16 posts on [Re]Encoded.com.

Contact the author

One Response to “CSS Navigation: Tutorials, Examples & Free Downloads”

  1. logos designers Says:

    Get this same, restaurant All of?Living a healthier, will influence the.Optimize its content, and it grows.Turbulence Training workout logos designers, He doesnt think grows bright and.The session Problems, undurchschaubares Pokerface Wer.,

Leave a Reply