Home > 2010 Summer BTI220 > Create a horizontal menu (nav bar) using an XHTML list and CSS

Create a horizontal menu (nav bar) using an XHTML list and CSS


In this post, learn how to create a horizontal menu, also known as a navigation bar, using an XHTML list and CSS.

 

Since 2004 or so, XHTML lists styled with CSS have been used for menus and navigation bars. Previously, tables were used to lay out menus, and you know that we don’t use tables any more for layout.

This post will enable you to get easily started with this style of menu. The technique is suitable for simple web sites, where you have only a few pages. However, it is not scalable, and will need modifications to be modular enough to use on any web site, especially those that feature server-side generated content.

 

Specifications for the menu

The menu must implement the following specifications:

  • Easy, visible, click target
  • Shows the current page clearly
  • Mouse hover changes color

 

General approach

The following is the general approach we use to create the menu:

  1. Use an unordered list
  2. Make list items inline and fixed in size (style as needed)
  3. Set the colours for normal, hover, and the "current" visible page
  4. Edit each page to enable detection of the "current" visible page

 

Detailed steps

Here are the detailed steps:

Create a list for the menu items

Give the ul an id, so that we can style it.

Make the list items inline

Create a rule for the list item, to display: inline;

(Note that if the list is inside a container, you will then probably have to set the container’s height, otherwise overlap may happen.)

Remove the indentation etc. on the list itself (margin, padding)

Set the background colour for the list itself

Make alternate colours for normal, hover, and the "current" (visible) page

Set the background colour of a list item link (a element) to match the list’s background colour

Set other properties to match your requirements

For the hover state, set an alternate background colour

For the "current" (visible) state, set an alternate background colour

Edit each page to enable detection of the "current" visible page

Assume that this menu’s XHTML will be copied and used on multiple pages. In that situation, you must edit the XHTML, and add a class="current" attribute to the list item for the current (visible) page, which will enable the CSS rule above.

 

Articles that you should read, and resources that you should use

This post isn’t definitive in any way, because it is intended to get you started with this style of menu. For more information, you should work through these articles:

Drop-Down Menus, Horizontal Style

Turning a list into a navigation bar

Floating inline list items

Horizontal lists

Eric Meyer’s tabbed navbar

 


Advertisements
Categories: 2010 Summer BTI220
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: