Navigational structure is one of the most crucial aspects of effective website design. Navigational bars/menus are frequently key design elements that help to create the look and feel of a website through color, typography, shape, and sometimes images.
While the appearance of the navigational menu can make or break a design, the usability of the site should not suffer in order to accomplish a specific look. Ideally, the navigation should be attractive and compliment the look of the site rather than overpower the rest of the site and take focus away from the content.
Unfortunately, many websites still use outdated navigational methods that take away from the usability of the website. If images are relied on heavily for navigational purposes the site may be inaccessible to users with disabilities or to users who surf with images turned off. However, that doesn’t mean that navigational menus have to be plain and simple-looking in order to remain accessible.
By using CSS to create a navigational menu you can achieve both accessibility and a professional, attractive appearance.
The benefits of using CSS for navigational menus include:
1. Lightweight Code
The combination of CSS and HTML create navigational menus that are much lighter weight (much less code) than similar navigation menus that would be created with JavaScript or images (CSS can be used in combination with images to retain all the benefits of a CSS menu with less weight than a menu strictly based on images). Lighter weight code is easier for search engines to index and it creates pages that load faster for visitors.
2. Accessibility
CSS-based navigation is accessible and usable for all visitors. If a user is surfing with images and/or CSS turned off, the navigation will be usable as a bulleted list. The small percentage of visitors using older browsers that do not support CSS will also be able to use the navigation.
3. Unlimited Design Options
Using CSS for your navigational bar does not mean that you will be limited in your design. In fact, CSS menus offer as much or more flexibility as other navigational options. When CSS is used with background images just about any look is possible to achieve. (To see some of the variety of CSS-based navigation menus, visit CSS galleries like CSS Vault and CSS Beauty.)
4. Plenty of Scripts Available
If you do not want to create your own CSS-based menu from scratch, there are plenty of free scripts available for use. Using a free script does not necessarily mean that you will have the same navigational menu as hundreds or thousands of other websites. Any menu can be customized and adapted (color, size, font, background image, etc.) to match the look and feel of your website. Some of the best free CSS menus can be found at:
Vandelay Website Design
Exploding Boy
Dynamic Drive
CSS Vault
Listamatic
CSS Showcase
Razvan’s Nerve
10 comments from readers
1 Extensive CSS List: 134 Top CSS Resources << Vandelay Website Design Jul 12, 2007 at 5:05 pm
[…] 4 reasons to use CSS-based navigation - http://www.vandelaydesign.com/blog/css/4-reasons-to-use-css-based-navigation/ […]
2 Todd G. Oct 29, 2007 at 12:21 pm
check out http://www.13styles.com too, I have some nice free CSS menus with the source photoshop files included.
3 Vandelay Design Oct 29, 2007 at 7:33 pm
Todd,
Nice menus, thanks for adding that resource.
4 sydney web designer Dec 10, 2007 at 10:59 pm
“When CSS is used with background images just about any look is possible to achieve.”
Just a thought on accessibility. There may be times when you do want to use a graphic for navigation, and in these cases you will still want to use an image instead of a background image. The reason for this is the element has a alt=”" variable which lets you set an alternate text if images are turned off or if the image is broken - it will also show up when the image link is hovered by most browsers which is good for screen readers or sight impaired users.
Also, you forgot the best aspect of styling with css - ease of updating. Say I apply a style to all of my anchor elements -
a {
color:#11ff00;
}
Then all of my anchor elements will automatically be that colour (I’m from Australia where we spell ‘color’ correctly
). If I want some of my anchor elements to be a different colour, all I have to do is assign a class to my anchor like so - - then define it in the css as -
.newAnchorClass {
color:#010101;
}
and now for every instance of the class I can update my css styles for every document in the site which points at the external css file. If you like this feature you should also try xslt transformations.
5 sydney web designer Dec 10, 2007 at 11:01 pm
Heheh - it treated my anchor as code. For fututre reference it was suppose to look like -
so - - then define it in the css as -
.newAnchorClass {
color:#010101;
}
6 sydney web designer Dec 10, 2007 at 11:02 pm
Nope - that didn’t work either - moderator help!
7 Using CSS to Do Anything: 50+ Creative Examples and Tutorials Apr 22, 2008 at 6:22 am
[…] 4 Reasons to Use CSS-Based Navigation- By using CSS to create a navigational menu you can achieve both accessibility and a professional, attractive appearance. Vandelay Design listed the benefits of using CSS for navigational menus, Worth reading. […]
8 Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design May 6, 2008 at 4:13 am
[…] 4 Reasons to Use CSS-Based Navigation- By using CSS to create a navigational schedule you crapper attain both availableness and a professional, captivating appearance. Vandelay Design traded the benefits of using CSS for navigational menus, designer reading. […]
9 Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design May 6, 2008 at 4:13 am
[…] 4 Reasons to Use CSS-Based Navigation- By using CSS to create a navigational schedule you crapper attain both availableness and a professional, captivating appearance. Vandelay Design traded the benefits of using CSS for navigational menus, designer reading. […]
10 Gotham - Sydney Design Studio Jul 2, 2008 at 11:47 pm
The other bonus is that you can redesign an entire site (which has been built in CSS) and swap over the stylesheet file and the whole site is changed.
Makes for a much quicker turnaround for designers.