Increase usability 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 highlight the button of the current section.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Web Site Menus - Which Section Am I In?

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>

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268