How To Make A Navigation Bar That’s Simple and Attractive

Published: 07th May 2010
Views: N/A

You're building a website and you need to make a navigation bar for it. How do you go about it?

First you need to decide what sort of navigation bar to make, and it doesn't have to be complicated. If you're building a website for yourself or your small business a simple left hand text based navbar will do the job nicely. Text based navbars are used a lot, and you can make them look quite nice with a little effort.

If you want to make a navigation bar that's drop down or flyout it will take more time and effort for very little advantage. In that case you're probably better off buying a website template with the looks and navigation bar that you want, so you can concentrate on what's really important for your website - writing content.

Other things to consider are how to locate the navbar, how to style it, how to make it change when visitors hover their mouse over a menu item, and how to be able to change it simply on every page at once. You really don't want to have to change the navigation bar on 20 or 50 pages one after the other when you update it with a new menu item.

Locating the navigation bar is quite simple. You just build your website using tables for the layout in either a two or three column arrangement, and put the navbar in the left hand column directly below the header graphic. The modern trend is to use CSS to position items on the web page, and that's good if you want to build websites professionally, but to make a website for yourself or your small business tables are fine, and a lot easier to do.

Being able to change the navbar easily on every page at once is a bit more difficult, but it is well worth the extra effort. In fact, it is pretty well essential.

You can make the navigation bar in a separate file called a virtual include, and then place a small piece of code in the web page where you want it to go. When a visitor opens the webpage the piece of code calls up the virtual include which then places the navbar on the page. When you need to update your navigation bar you just have to update that one virtual include file. There isn't space to go into detail here, but if you visit my website, you'll find all the detail you need.

Styling is another matter, and you can style both the navigation bar text and the background. Using CSS for the navbar text styles lets you change styling easily by changing one file. CSS gives you more styling options than using HTML and it lets you easily change the text color, size and font plus change the style when someone hovers their mouse over a menu item. You could make the hovered text radically different to the rest of the navbar, but a subtle change such as a change in color is usually best. It's easy to do.

If you want to change the navigation bar background, you can do it in the CSS file, but you might find it easier to get the effect you want using HTML. Once again, if you do it in the same virtual include file you can change every page at once by changing that one file.

Don't put too many barriers between yourself and a successful website. You don't have to learn HTML or learn CSS to make a navigation bar. Using a web page editor is an easier way to go, and it doesn't have to cost much. KompoZer is a free web page editor that works well and has a built in CSS editor.

Making a simple text based navigation bar that's attractive and works fine is well within your capabilities. Go for it!

Warren Newson is editor of Go there now for detailed information on how to make a navigation bar

More to Explore