Can someone point me to a good horizontal tab menu?

moss2076

10-09-2007, 02:42 PM

Hi I want to create my own horizontal menu, rather like the green one that this site uses, but with the images flipped upsidedown. I want to design one with rounded edges at each end of the menu. I have seen a few on dynamic drive but Im having trouble replicating my own.

I have created a basic horizontal list, but cant get the 3 images positioned. I have left (end rounded), middle (rectangle shape), and right (end rounded) images but im not sure where to put each image eg in the UL, or the LI.

I dont have a website up and running at the moment, but here is my code so far! Sorry I know its rubbish.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
body {
font: 11px verdana, arial, helvetica, sans-serif;
padding: 0px;
}

ul#leftmenu {
list-style-type:none;
background-repeat: no-repeat;
padding-right: 0px;
padding-bottom: 0px;
margin: 0px 0px 0px 0px;
}

#leftmenu li {
float:left;
margin:0px 1px 0px 0px;
padding:0px 10px 0px 0px;
background-image: url(../images/bannerimage_buttons_white_middle.gif);
background-repeat: repeat-x;
}

#leftmenu a {

display:block;
padding:5px 15px 5px 5px;
text-decoration:none;
color:#FFFFFF;
}

</style>
</head>

<body>

<ul id="leftmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Order</a></li>
</ul>

</div>

</body>
</html>

_Aerospace_Eng_

10-09-2007, 03:16 PM

We need the images you are using if you expect us to help you. Either link us to them or attach them in a post.

vtjustinb

10-09-2007, 03:55 PM

I would suggest marking up the navigation list like this:

<div id="nav">
<ul>
<li><a href="#">items</a></li>
<li><a href="#">items</a></li>
<li><a href="#">items</a></li>
</ul>
</div>

This gives you two containers to put the endcaps on, so you could put the left rounded corner on div#nav with a "left top" positioning, and the right rounded corner on #nav ul with "right top". Then just put your repeating rectangular background on the #nav li or #nav li a elements and you'd be good to go.

A better approach (less images splicing together the better imo) is to use the sliding doors technique made famous by Doug Bowman. For this, we'll create two images, one that has the left endcap and most of the body, and one that has just the right endcap:

left endcap: http://just-in.org/etc/door-left.png
right endcap: http://just-in.org/etc/door-right.png

We give the outer div the background of door-left.png at left and top, and the inner ul the background of door-right.png at right and top. This does a few things:

1.) since we made door-left.png bigger than we need, it will expand to accommodate more navigation elements without needing to make more images
2.) since we made the doors taller than we need, if the text size increases the tabs will increase in size as well instead of breaking.

So with a little bit of code:

#nav {
background: url(door-left.png) left top no-repeat;
margin: 0;
padding: 0;
float: left;
}
#nav ul {
background: url(door-right.png) right top no-repeat;
margin: 0;
padding: 0 1em;
float: left;
}
#nav li {
list-style: none;
float: left;
height: 1.5em;
padding: 0.5em 1em;
}
#nav li a {
color: #fff;
font-weight: bold;
display: block;
text-decoration: none;
}

And you'll get something similar to this:

http://just-in.org/etc/test.html

One little enhancement we might make is to create the following spacer image:

Spacer: http://just-in.org/etc/door-spacer.png

We'll then attach this to the right of all of the <li> elements except for the last one (because there's not good support for the last child pseudo-selector) which will need a special class.

#nav {
background: url(door-left.png) left top no-repeat;
margin: 0;
padding: 0;
float: left;
}
#nav ul {
background: url(door-right.png) right top no-repeat;
margin: 0;
padding: 0 1em;
float: left;
}
#nav li {
background: url(door-spacer.png) right top no-repeat;
list-style: none;
float: left;
height: 1.5em;
padding: 0.5em 1em;
}
#nav li.last { background-image: none; }
#nav li a {
color: #fff;
font-weight: bold;
display: block;
text-decoration: none;
}

HTML:

<div id="nav">
<ul>
<li><a href="#">items</a></li>
<li><a href="#">items</a></li>
<li><a href="#">items</a></li>
<li><a href="#">items</a></li>
<li><a href="#">items</a></li>
<li class="last"><a href="#">items</a></li>
</ul>
</div>

The result of our enhancement: http://just-in.org/etc/test2.html

You'll notice because we made the tabs larger than they needed to be and did our spacing with relational units that you can resize the browser text and it won't break the layout. Also, because we're using a spacer graphic instead of a set width on the navigation elements themselves the navigation list expands and contracts to handle list items of different text length. That type of bulletproof approach (evangelized by Dan Cederholm) is definitely what you want to strive for in your CSS designs.

Cheers!

jlhaslip

10-09-2007, 09:19 PM

http://cssplay.co.uk/ maybe?

Nice Tutorial, by the way...

moss2076

10-10-2007, 02:46 PM

Thankyou so much "vtjustinb" your tutorial is exactly what I wanted. I will have to alter the code slightly for my own menu as I have a background image which I use in the div. But I can add the "leftcorner" image to the background image and then position the menu itself where i want it to sit in relation to the background image - if that all makes sense!

Thanks again!