PDA

View Full Version : menu button to be another color when active


ketanco
Nov 7th, 2009, 09:41 AM
Hello, for the site robotbuy.com left side blue menu buttons, I want the active button to remain as red. Right now only if you hover the mouse it becomes red.

For the .menu active I tried pasting the

background:url('http://www.robotbuy.com/pictures/button2.png') no-repeat 0 0;

which is the red button, but it doesnt work. Please advice.
Here is the css:


.menu{
width:100px;
}
.menu a{
display:block;
width:175px;
height:48px;
valign: center;
background:url('http://www.robotbuy.com/pictures/button1.png') no-repeat 0 0;
line-height:30px;
font-family:Arial;
font-size:12px;
font-weight: bold;
color:black;
text-align:center;
text-decoration:none; margin-left:0px; margin-right:0px; margin-top:-17px; margin-bottom:0px;
}
.menu a:visited{
color:#white;

}
.menu a:hover{
color:white;
background:url('http://www.robotbuy.com/pictures/button2.png') no-repeat 0 0;
}

.menu a:active
{

color:#ffffff;
}
abduraooft
Nov 7th, 2009, 10:08 AM
Take a look at http://www.codingforums.com/showpost.php?p=605564&postcount=3
ketanco
Nov 7th, 2009, 03:48 PM
didn't understand how to use the info in that post in my case...
abduraooft
Nov 7th, 2009, 03:58 PM
Add different ids to your anchors, like

<div class="menu">

<a id="home_link" href="http://www.robotbuy.com/index.php">HOME</a>
<a id="books_link" href="http://www.robotbuy.com/books.php">BOOKS</a>
<a id="domestic_link" href="http://www.robotbuy.com/domestic.php">DOMESTIC ROBOTS</a>
....
</div>
After that add different id's to the body tag of your pages, say
in index.php, <body id="home">
in books.php, <body id="books"> etc.

Now, to show the selected link, you may style your menu items, like

#home #home_link,
#books #books_links{
color:white;
background:url('http://www.robotbuy.com/pictures/button2.png') no-repeat 0 0;
}
PS:It's better to use an unordered list to build your list of navigation items, to make your document semantic (http://boagworld.com/technology/semantic-code-what-why-how)
ketanco
Nov 7th, 2009, 05:58 PM
thanks it works. appreciate the help....