Dale's Computer Art
Dale's Web Tips Index

Navigation Bars - Part 2

Text-Based Navigation Bars Using CSS...
and the List Elements (li/ul)

I have another summary called Text-Based Navigation Bars With and Without CSS - Part 1 which takes a more general look at text-based nav bars.

Since navigation bars can be considered as lists in a horizontal or vertical direction, it is possible to use Cascading Style Sheets with the UL (unordered list) element to turn lists into navigation bars.

***

After I created this page, I found a website called Listamatic that has collected and presents numerous examples of horizontal and vertical navigation bar designs. The Listmania site is extremely well organized and informative. Check out this page but definitely GO TO LISTAMATIC.

NOTE: (A few weeks after I did this page) - After I played around with these and other CSS nav bars a bit I found myself getting a little discouraged. They work differently on different browsers and different platforms. The Listmania site is great because it provides a table showing which of the nav bars demonstrated works with which browser and platform. But the fancier list-based nav bars aren't easy to make and require some skill with CSS. I have decided to go back to simpler CSS nav bars for the time being and wait till the browsers catch up with the technology!

***

1. Horizontal Navigation Bar Using UL element

From: http://www.hotdesign.com/seybold/22navbars.html

This horizontal navigation bar calls an external style sheet named navbarh.css that is linked to this page using:

A standard UL list of links would normally display as:

But if you put the list inside the following HTML code and call an external style sheet...

<div id="navh">
(UL LIST OF LINKS)
</div>

The list will turn into this and fill the width of the screen (the layout of this page is an 80% table):

You can put the list into a table to control its width:

Style Sheet for horizontal navigation bar:

#navh{background-color:silver;width:8em;border:solid 1px gray}
#navh ul{list-style-type:none;margin:0;padding:0;border:none}
#navh li{display:block;margin:0;padding:0.25em 0.5em 0.25em 1em;width:100%;border-top:1px solid gray}
html>body #navh li{width:auto}
#navh li:first-child{border:none}

2. Vertical Navigation Bar Using UL Element

From: http://www.hotdesign.com/seybold/22navbars.html

This vertical version of the same navigation bar calls an external style sheet named navbarv.css that is linked to this page using:

Put your UL list inside the following:

<div id="navv">
(UL LIST OF LINKS)
</div>

and it will look like this:

Vertical navigation bar style sheet:

#navv{margin-top:1em;margin-bottom:0.5em}
#navv ul{background-color:silver;text-align:center;margin-left:0;padding-left:0;border-bottom:1px solid gray}
#navv li{list-style-type:none;display:inline;padding:0.25em 1em;border-left:1px solid white}
#navv li:first-child{border:none}

3. Vertical Navigation Bar Box With Rollover Effect Using UL Element

From: http://www.alistapart.com/articles/taminglists/

The web link above explains the css code for this rollover effect and also shows how to do several kinds of more basic horizontal nav bars using CSS

A standard UL containing links can be used to create a dynamic menu with hover effects. In order to obtain the hover effects the UL provides the structure, and the anchor styles provides most of the visual effect.

This vertical version of the same navigation bar calls an external style sheet named navbutton.css that is also linked to this page using:

Put an unordered list (UL) inside the following HTML code:

<div id="button">
(UL LIST OF LINKS)
</div>

and it will look like this:

Vertical rollover navigation bar style sheet:

#button {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #90bade;
color: #333;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

***

Other web resources related to making navigation bars out of UL lists:

THE List site - Listmania: http://css.maxdesign.com.au/listamatic/index.htm

General Overview of HTML Lists: http://www.tutorials4u.com/html/tutorial-08-list.htm

CSS Specifications Box Properties: http://www.htmlhelp.org/reference/css/box/#padding

Great site for taking CSS lists to the max: http://css.maxdesign.com.au/listamatic/

See Styling Lists links on: http://css-discuss.incutio.com/

CSS and Lists: http://www.w3schools.com/css/css_list.asp