HTML and CSS Reference
In-Depth Information
Unordered lists are used as the basis for a navigation bar for several reasons.
➤
➤
First, the links in a navigation bar are essentially a collection of similar items, as are list items.
➤
➤
Second, if the visitor's browser is incapable of rendering the styled elements, the navigation
bar degrades gracefully to a fully functional group of links, which serves the same purpose as
the navigation bar.
➤
➤
Finally, sub-menu items on a navigation bar, which may appear when the main menu item is
clicked or hovered over, have an exact parallel in nested list items.
A slightly older technique for navigation bars relies on a series of images, each set
up with a separate link. To keep these images structured properly, the graphics are
placed in a table. With the advent of CSS, however, this method has gone out of
favor, along with other instances of table-based layouts.
When designing your navigation bars, it's important to keep their primary purpose in mind. The
navigation needs to be clear enough to be understood at a glance by the site visitor. Consistent
implementation across the site is also an important consideration: You don't want your visitors try-
ing to figure out a new navigation scheme on every page. Ideally, your navigation should make it
easy for folks to get to the content on your site as quickly as possible.
workinG wiTH LisTs For naa
a
iGaa
a
ion
Very frequently, the HTML for a navigation bar — whether horizontal or vertical — is coded in
exactly the same way, that is, as a
<ul>
tag, complete with list items in a
<div>
. Here's an example:
<div id=”nav”>
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”products.html”>Products</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”contact.html”>Contact Us</a></li>
</ul>
</div>
This same HTML code could be used for either a horizontal or vertical navigation bar: It all
depends on how the relevant CSS is styled. Four key sections in the standard navigation bar require
CSS rules:
The container
➤
➤
➤
➤
The
<ul>
tag
The
➤
➤
<li>
tags
➤
➤
The
<a>
tags
