How To Make A Navigation Bar

This page tells how to make a navigation bar (navbar) for your website.

The navbar uses an HTML table for the layout, and CSS to make it easy to set and change the styles such as fonts, colors, underlining etc. It's in a virtual include so that it can be updated on every page at once by changing just one file.

I'm using KompoZer (an update of Nvu) for the tutorial so anyone can follow along and do what I've done.

This is part of a tutorial on how to create a website template that you can customize and update easily. If you've followed the website template tutorial so far you shouldn't have much trouble. If you haven't seen the rest of the tutorial you'll need to look at it to be able to make the navigation bar.

This Navbar's Styling

The navbar I'm creating in this tutorial will be text based with no underlining. It will have the same color for visited and unvisited links, and a different color when a link is hovered over.

Text based navbars are quick to load, easy to make, and you can make them look quite smart. Once you've learned how to make this navbar, you'll be able to style one how you want.

Creating The Navbar

I prefer to make the navigation bar in a web page editor for speed and because it's easy, though if you're competent with HTML, you can use that to code your navbar.

Example of a basic navigation bar, without styling being applied. I've divided the navbar into sections which can improve click-throughs when you have a long navbar.

Fire up KompoZer and create a new page with a table that has just one cell. Make it say 180 pixels wide to fit the 200 pixel wide column in the template you've already created. Learn more about creating HTML tables in KompoZer.

In the table, type in the list of pages that you want for your website's navigation. Then create the links to those pages. Don't worry about colors or underlining at this stage.

Saving The Navbar

Open the source code (click source at the bottom left of the KompoZer page), copy everything between the <body> and </body> tags, paste it into a text editor such as wordpad, and save it with the extension of your choice, either htm, .html, .shtml, .txt, .inc. or .ssi.

I normally use .html because that is the language the page is built with.

Your text editor may use formatting you can't see, which can put a lot of strange characters into your navigation bar. For example, Wordpad can use rich text formatting on the file even though it is saved as html. Try saving it as a text file first (.txt) to remove any formatting to stop the problem.

As your website grows it will be easy to add more links to the navbar.

Styling The Navbar

The navbar will be styled using the CSS file that we've used for all the styles in the web template. So open your website template page in KompoZer, and open the CSS editor.

You'll need to make a series of new styles for the navigation bar links, so click on the palette icon at the top left of the CSS editor. In the right pane select Style applied to an element with specified ID attribute.

In the text box below a hash (#) will appear. Right after the hash, leaving no space, type navbar, so you get #navbar. Then click Create style rule.

The new #navbar style rule will appear in the left pane, and the right pane will change so you can select the attributes for this style rule.

Select the text tab at the top of the CSS editor and start making the navigation bar styles the way you want them. For this example I'll use a custom font family, Times Roman, serif, to contrast with the body text. I'll set font weight to bold, alignment to left, and font size to 1.0em.

You can set the background color now, to color the entire navbar if you want to. Select Background at the top of the CSS editor, then set the color to what is appropriate for the website you're building. Alternatively, if you can't get the effect you want with CSS, you can set the background colors in the HTML table the navbar is in.

We'll set the font colors soon.

Styling The Navigation Bar Links

Example of the navbar with styling applied with CSS

The same navbar with text styling applied via CSS. The background color was applied in the HTML table. "Page 2" shows the difference with the a:hover.

It would be very easy to change any part of the styling.

Same navbar, different styling

This is the same navbar with different styling. Text is still styled with CSS, while the background colors are in the HTML table.

The links have four states that you'll need to set the styles for. They are the unvisited link (a:link), the visited link (a:visited), the link when the mouse pointer is hovering on it (a:hover), and the active link (a:active).

Most navbars have the unvisited link and the visited link with the same style, usually the hover is different and sometimes the active link will be different. It's all easy to do with CSS when you make a navigation bar.

I'll also make the links with no underlining, to make it look a bit nicer. Underlining isn't needed in the navigation bar because it's obvious the links are links.

All the links will be made the same way that you styled the navbar above.

Click on the palette icon at the top left of the CSS editor. In the right pane select Style applied to an element with specified ID attribute. After the hash in the text box, type navbar a:link, so you get #navbar a:link then click Create style rule.

Set Font Family to unspecified (we already specified it in #navbar above). Set font size to 1em which will keep it the same size as specified in #navbar, set the color to whatever is appropriate for your site, font weight to inherited, text decoration to none, and everything else to unspecified.

Create another style rule for #navbar a:visited and style it exactly the same as #navbar a:link.

Create a style rule for #navbar a:hover and make it the same as #navbar a:link, except for the font color.

Last of all, you can make a style rule for #navbar a:active. When visitors click on a link the link style will change.

Once you've learnt the techniques, you can experiment with the styling to make a navigation bar that suits you and your site.

Linking To The Navbar In Your Website Template

So far you've made the navigation bar in an HTML table and styled it with CSS.

To make the CSS styles work you'll need to wrap divs around your navbar file, and the navbar itself needs to be inserted in your web page template via a virtual include. Then, just changing the one navbar file will change the navbar on every page in your website.

Linking To The CSS Styling

Assuming you called your CSS navbar style navbar, type
<div id="navbar"> at the start of the navbar file, and at the end of the navbar file type </div>

I'm also using a CSS class I've called borderless table to stop the borders I've applied to the main table being used on the navbar table. So I'm using another div <div class="borderless table"> as the first line of my navbar file.

The start of the navbar file showing the two opening div commands.

The end of the navbar file showing the closing div commands

Creating The Virtual Include Link

You'll need to create a link for the virtual include. In the source code of your web page template put the link where you want the navbar to be displayed. Write the link as shown below, but where the link says navbar.html, use the name you called your navbar file.



If you put the navbar.html file in another folder e.g. support-files (which I normally do) the the link would be

The navbar virtual include in the web page source code (shown in green)

More information about using virtual includes

Checking Your Navbar

Unfortunately you can't see your navbar in operation in KompoZer or even by opening the web page template that is stored on your computer. You have a few choices to be able to see your navbar on the actual web page to check that it looks right.

You could buy high end web page software such as Dreamweaver, but that is expensive. Or you could install an apache server on your computer but that is quite complicated.

Otherwise you'll need to upload everything to your web host then open the page on the internet. To do that you'll need to choose and register a domain name, get web hosting, and upload everything to your web host, then view the page on the internet.

If the navigation bar isn't the way you wanted, you'll have to make the appropriate changes, upload the files to your web host again, and recheck it.

Next Page: Working with subfolders

Pages In The Template Tutorial

Return from How To Make A Navigation Bar to the Template Tutorial Overview

[?]Subscribe To This Site