...

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



ketanco
11-07-2009, 08: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
11-07-2009, 09:08 AM
Take a look at http://www.codingforums.com/showpost.php?p=605564&postcount=3

ketanco
11-07-2009, 02:48 PM
didn't understand how to use the info in that post in my case...

abduraooft
11-07-2009, 02: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
11-07-2009, 04:58 PM
thanks it works. appreciate the help....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum