PDA

View Full Version : Menu Help?



Wardy118
02-21-2007, 01:09 PM
Hi all,

Right, basically what i am trying to achieve is a menu similar to that of this site http://flamingmedia.growldesign.co.uk/. So far I have the black border going along the top of the page but i'm having trouble getting the effect of 'selected' option, i.e. once you have clicked on one of the targets the selected target changes to black and the original target changes to white. Its really hard to describe you really need to look at the site to see what i mean. This is my code so far and you can see what it looks like here http://www.geocities.com/motors_4_u//proper.html.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<title>Untitled</title>

<style type="text/css">

#invertedtabs{
margin:auto;
width: 510px;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em;
padding:0;
list-style-type:none;
text-align:center; }

#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}

#invertedtabs a{
float: left;
color: white;
background: #050110 url(http://www.geocities.com/motors_4_u/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}

#invertedtabs a span{
float:left;
display:block;
background: transparent url(http://www.geocities.com/motors_4_u/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}

#invertedtabs a span{
float:none;
}


#invertedtabs a:hover{
background-color: #000000;
}

#invertedtabs a:hover span{
background-color: #000000;
color: #ffffff;
}

#invertedtabs #current a, #invertedtabs #current span{
background-color: #150bde;
}

#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #050110;
border-bottom: 1px solid #000000; }
</style>

</head>

<body>

<div id="invertedtabsline">&nbsp;</div>
<div id="invertedtabs">
<ul>
<li style="margin-left: 1px"><a href="#nogo" title="FAQ"><span>FAQ</span></a></li>
<li><a href="#nogo" title="About Us"><span>About Us</span></a></li>
<li><a href="#nogo" title="Terms & Conditions"><span>Terms & Conditions</span></a></li>
<li><a href="#nogo" title="Cancellations"><span>Cancellations</span></a></li>
<li><a href="#nogo" title="Contact Us"><span>Contact Us</span></a></li>
</ul>
</div>
<br style="clear: left" />

</body>
</html>




I know how to change the background to white but i just wanted to keep it black so you could see how i wanted the selected target to look like once it had been 'selected'.

Thanks:thumbsup:

Shoot2Kill
02-22-2007, 01:12 AM
http://www.alistapart.com/articles/slidingdoors2/

^ ^ ^ Try looking at this tutorial

Stardog
02-22-2007, 03:01 AM
There's another way to do it by giving your <body> tag an id like <body id="page1"> for every page.

Check out my site here - http://eldervale.ut200xfiles.com

Each page has a new body id. Then you can use your CSS file to highlight the correct button for the page.