Web Site Menus - Which Section Am I In?
By Stephen Bucaro
One way to increase the usability of your website is to use a navigation design that
web users are familiar with. For example, a navigation bar just below a website's header
is a common design used today. Clicking on a button in the navigation bar takes the user
to a different web page or different section of the website.
You can increase usability further by highlighting the button of the current section
in the navigation bar. This helps the user understand where they are within the structure
of your website. In this article you'll learn how to create a navigation bar, and how to
use a simple Java Script function to highlight the button of the current section.
Let's design a navigation bar with three buttons: "Home","About", and "Contact". The
navigation bar will be constructed using an html table. If you want to get some "hands-on"
experience, open your favorite basic ASCII text editor, like Windows Notepad, and type
in the html code shown below.
<html>
<head>
</head>
<body>
<table><tr>
<td>Home</td>
<td>About</td>
<td>Contact</td>
</tr></table>
</body>
</html>
This code creates a basic webpage with a table. Save the file with the name "homepage.htm"
and then double-click on the filename to open it in your Web browser. Not too impressive?
Let's work on it some more. Edit the code to add a link so that it looks as shown below.
<table border=1>
<td><a href="homepage.htm">Home</a></td>
This time when you open the page in your browser, it will look more like a table, and when
you click on the home button it will reload the home page. To test the menus, you should
create two more webpages, one named "about.htm" and one named "contact.htm". Add links to
their respective menu buttons.
Let's work on it some more. Edit the code so that it looks like that shown below. (This
shows only the code for the "About" button, but edit all three buttons similarly.)
<td bgcolor="lightblue" width=80>
<a href="about.htm">About</a></td>
Two attributes have been added to the <td> tag, bgcolor to give the button
a light blue background, and width to make the button 80 pixels wide. You should
specify the same width for each button so that they will all be the same size, giving the
navigation bar a more uniform appearance.
So far we have a basic navigation bar, but with html alone we cannot achieve the effect
of highlighting the current section's button. We will now use a bit of Java Script code to
add that effect. Create a Java Script code block in the head section of your webpage and
move the code of the navigation bar into that Java Script code block as shown below.
<html>
<head>
<script language="JavaScript">
<table border=1><tr>
<td bgcolor="lightblue" width=80>
<a href="homepage.htm">Home</a></td>
<td bgcolor="lightblue" width=80>
<a href="about.htm">About</a></td>
<td bgcolor="lightblue" width=80>
<a href="contact.htm">Contact</a></td>
</tr></table>
</script>
</head>
<body>
</body>
</html>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
