HTML5 & CSS3 Techniques: Creating a Web Site Navigation List

Goals of this Tutorial: Create an Effective Navigation Template

The point of web design is not only to create and style content but also create templates which can either be simply reused or quickly modified to perform the same underlying task where a different styling or theme might be desirable.

In this tutorial we will look at how navigation lists were created in pre-HTML5/CSS days and how they have evolved with the introduction of the <nav> element tags.

Creating navigation Lists: Pre-HTML5 & CSS3

The hint for the new web developer should be that we talk about navigation lists, with the emphasis on the word list.

As illustrated in the following snapshots we start out with out skeleton HTML template. So now what's next? Well, our first step is that we are going to create an unordered list:

<ul>
</ul>


Now, the purpose of a navigation list is to to like to other pages in the web site. So the next item(s) to add will be anchor tags. Anchor tags (we limit the scope of our example here to high level linking of pages) as you may recall have a format of:

<a href=web page location (filename)>Some display text</a>


For experimentation purposes you can create list items using a dummy href, reference value,of #, in an anchor tags. Naturally, as you develop web pages for your web site you would want to replace the references with appropriate filenames during development and file locations for deployment.

Generally, one would have entries for Home, Content, Contact, etc.

So we would come up with a basic list as illustrated in the snapshots below.

Initial Navigation List

Not very impressive. But this illustrates the basic structure. There is a list of clickable links.The links are dummy links to the current page (i.e. #).
Not very impressive. But this illustrates the basic structure. There is a list of clickable links.The links are dummy links to the current page (i.e. #).

Navigation Refinement #1: Change Display to Inline

Our first example is not too impressive. The thing to notice and we will refer to how items in a page are displayed is that list items are displayed as a block. this is noticeable if we look at a little trick of using background-color as is illustrated in the snapshot. Using different background colors for elements can be very helpful in page layout. There is nothing wrong with a vertical navigation list but for this example we will assume that we want to achieve a simple inline or horizontal list. This can be achieved through our stylesheet (or for the purposes of ease of illustration we will continue to place our styling in the header <style> elements).

Change to Inline Display

We use width and color to emphasize certain aspects of our navigation list. Color and specific size helps make  the layout more "concrete" when experimenting with design.
We use width and color to emphasize certain aspects of our navigation list. Color and specific size helps make the layout more "concrete" when experimenting with design.

Navigation Refinement #2: Remove Underlines & Change Fonts

It's pretty standard for web users to recognize a navigation bar as a set of hyperlinks, so we probably don't want the underlines. To eliminate the underlines we set text-decoration to none. We choose to target only anchor tags in unordered lists. Choose to be as specific as possible when specifying CSS markup!

Times New Roman is probably not the font you want to use for the list items, a san-serif font gives a cleaner look. You can experiment with fonts by specifying the font-family attribute.

Changing text-decoration and font-family

Underlines are removed by specifying text-decoration:none and font-family has been set to sans-serif, which loks somewhat cleaner for navigation bars especially if you want to create a distinct font-size/font from that of  your content.
Underlines are removed by specifying text-decoration:none and font-family has been set to sans-serif, which loks somewhat cleaner for navigation bars especially if you want to create a distinct font-size/font from that of your content.

Navigation Refinement #3: Padding, Color, Hovering

The values look kind of crowded, so let's apply some padding. using the padding-right attribute.

It's not apparent that the items in the navigation bar are clickable links, although the pointer does change when we hover over them. To modify the list items when we hover over them we use the pseudo-class “hover”. and can change anything we want: font-size, text-decoration, color, etc.

The snapshots show changing both the font-size and the element color.

Adding Padding and "hover" Effects

In this snapshot we have added some padding right to the elements to give them some breathing room.
In this snapshot we have added some padding right to the elements to give them some breathing room.
One CSS technique would be to use the hover pseudo-class for the anchor tags. To illustrate we used a font-size change, perhaps a better modification would be a text color change.
One CSS technique would be to use the hover pseudo-class for the anchor tags. To illustrate we used a font-size change, perhaps a better modification would be a text color change.
This illustrates the use of color when hovering over an anchor tag.
This illustrates the use of color when hovering over an anchor tag.

Navigation Enhancement #4: Changing to New Element Type

Prior to HTML5 it would be common to wrap this list items in a <div>. Remember, a <div> is just a container or "bucket", it has no semantic meaning but allows targeting for styling. Well, with HTML5 this changed with the introduction of the <nav> element. It was intended to impart some semantic meaning to the links associated with either page navigation or navigation with a page itself. It's major benefit is it like some of the other new HTML elements (e.g. section, footer, aside) help to create cleaner code and perhaps assist screenreaders.

Wrap Up and What's Next on the Topic

We have covered some of the basics of creating a navigation list. We started with a list in its standard display format and modified it with anchor tags to turn it into a navigation list. We used styling to present the list in a pretty standard horizontal format (although a vertical format is often effective as well). Eliminating bullets and underlines was next. We looked at the use of the CSS hover pseudo-class to highlight that the the items were clickable.

We discussed briefly the fact that there is a new HTML <nav> tag replacing what is still quite common in code, wrapping the list in <div> tags for both emphasizing the importance of the list as a navigation method and as a convenience for applying styling.

Lots more is possible. Nicely formatted text is not the only options for what we specified as text for the anchor tags. The coding is a little more involved if you decide to represent images as your links, for example, but it does make for a dramatic effect. We will look at that and other possibilities next time.


Please Rate This Introduction to Developeing Navigation Lists

Cast your vote for Was this a good introduction to HTML navigation lists?

More by this Author


1 comment

hotwebideas profile image

hotwebideas 2 years ago from New York

Hey, this is a great article on web navigation using HTML 5. Do you have anything on a hub that talks about pull down menus in a web navigation bar?

Bruce

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working