Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts

    Can someone point me to a good horizontal tab menu?

    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>
    Last edited by moss2076; 10-09-2007 at 03:47 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    I would suggest marking up the navigation list like this:

    Code:
    <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:

    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.

    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 {
    	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:

    Code:
    <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!
    Last edited by vtjustinb; 10-09-2007 at 05:11 PM.

  • The Following 2 Users Say Thank You to vtjustinb For This Useful Post:

    jlhaslip (10-09-2007), moss2076 (10-10-2007)

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    http://cssplay.co.uk/ maybe?

    Nice Tutorial, by the way...
    Last edited by jlhaslip; 10-09-2007 at 10:21 PM.

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •