“Serving the Magickal, Occult and Pagan Earth Community.”

join
- PWA-L
- PWAG
- WebRing
- Banner Exchange
- Link to US
- Member Files
about
design
herding css cats
pwag
- About
- Gallery '02
- Gallery '03
- Gallery '04
- PWA Art
- Join
<< back

Horizontal css Menu with Tab High-lite

by Parker Torrence

This tutorial will help you to quickly create a Horizontal css Menu from an unordered list (ul) with the use of a combinations of borders, padding and a:hover to achieve different list effects. In addition you will be shown how to take it a step farther and create a Current page Tab High-lite, by adding a css ID in the Body tag, and a css Class in the List tags.

Before you start, you will want to open a text/html editor so you can cut and paste the code and another browser window if you wish to follow along on Accessify.com.

Part I

First go to Accessify.com and use the list-o-matic. For this example I selecting five links with titles, I click next.

After I've entered "Link Text," "Link Title," and a # for the urls, I click next.

On the "List-o-Matic" form I'm selecting Style 9 (credit Jeffery Zeldman).

For this example I'm using style 9, you can choose any that you wish, . (The instructions in Part III should work with any of the Styles listed, just adjust the color to what you want.)

Right now my html code from Accessify.com looks like this:
<div id="navcontainer"> <ul id="navlist"> <li><a href="#" title="Page One">one</a></li> <li><a href="#" title="Page Two">two</a></li> <li><a href="#" title="Page Three">three</a></li> <li><a href="#" title="Page Four">four</a></li> <li><a href="#" title="Page Five">five</a></li> </ul> </div>

And my css code from Accessify.com looks like:
#navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #f5d7b4; border-left: 1px solid #f5d7b4; border-bottom: 1px solid #f5d7b4; border-right: none; padding: 0; margin: 0 0 10px 0; color: #f5d7b4; text-decoration: none; display: block; text-align: center; font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; } #navcontainer ul li a:hover { color: #930; background: #f5d7b4; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; }

This is what style 9 from Accessify.com looks like:

What you want to do now is add a class to each of the <li> tags.
<li class="pgone"><a href="#" title="Page One">one</a></li> <li class="pgtwo"><a href="#" title="Page Two">two</a></li> <li class="pgthree"><a href="#" title="Page Three">three</a></li> <li class="pgfour"><a href="#" title="Page Four">four</a></li> <li class="pgfive"><a href="#" title="Page Five">five</a></li>

Part II

If you use a style other then 9 skip down to Part III.

First, for me the colors are too light, so I am going to change them.

Now I like the look of Style 9 except that the last tab is open at the right. To correct this on the css code we add:
#navcontainer ul li.pgfive a { border-right: 1px solid #654; }
Where #654 is the new color I have selected to use, it should be the same color as the other borders.

Part III

The following steps will make it possible to high-lite the menu tab of the page you are on.

In my example, I have a five page website so on each page in the body tag I would add id="pgone" on page one, id="pgtwo" on page two, etc. until all five pages have an id in thier body tag. Now in your css add the following:
body#pgone #navcontainer ul li.pgone a { background-color:#cba; color: #210; } body#pgtwo #navcontainer ul li.pgtwo a { background-color:#cba; color: #210; } body#pgthree #navcontainer ul li.pgthree a { background-color:#cba; color: #210; } body#pgfour #navcontainer ul li.pgfour a { background-color:#cba; color: #210; } body#pgfive #navcontainer ul li.pgfive a { background-color:#cba; color: #210; }

So if this was page 4 of my example website the menu bar would look like this:

If you wish to use the above example, here is the complete Style Sheet:
/* "Horizontal css Menu with Tab High-lite" by Parker Torrence http://unfolded.net modified from code found at "Accessify" http://accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp */ /* created for use by members of the PWA http://thepwa.net October 2004 */ #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #654; border-left: 1px solid #654; border-bottom: 1px solid #654; border-right: none; padding: 0; margin: 0 0 10px 0; color: #654; text-decoration: none; display: block; text-align: center; font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; } #navcontainer ul li a:hover { color: #610; background: #fda; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } #navcontainer ul li.pgfive a { border-right: 1px solid #654; } body#pgone #navcontainer ul li.pgone a { background-color:#cba; color: #210; } body#pgtwo #navcontainer ul li.pgtwo a { background-color:#cba; color: #210; } body#pgthree #navcontainer ul li.pgthree a { background-color:#cba; color: #210; } body#pgfour #navcontainer ul li.pgfour a { background-color:#cba; color: #210; } body#pgfive #navcontainer ul li.pgfive a { background-color:#cba; color: #210; }

Code for most of this tutorial is from Accessify.com. See also Keeping Navigation Current With PHP, and Highlighting current page with CSS

Authors' retain all rights to any of their works published on thepwa.net.

pwa pwa-l pwag pwa lj xhtml css