how to create Active State in CSS Navigations
i have two buttons in menu on mouse over the button change image to another image but on mouse out it remains back to its original image what i want to do is to when i click this button it stat should be active so that one can know that which page he is visiting now. my code is
#menu
{width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul { list-style: none;}
#menu li { display: inline;}
#menu a { float: left;
width: 107px;
height: 28px;
display: block;
}
#menu a:hover { width: 107px;
height: 28px;
}
#emailUs
{ display: block;
width: 107px;
height: 28px;
background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
{
background: url("../images/add_h.jpg") no-repeat 0 0;
}
and the html code is
#menu
{
width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
width: 107px;
height: 28px;
display: block;
}
#menu a:hover {
width: 107px;
height: 28px;
}
#emailUs
{
display: block;
width: 107px;
height: 28px;
background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
{
background: url("../images/add_h.jpg") no-repeat 0 0;
}
Note: my开发者_开发知识库 images are seperated images not a sprite image.
you can see the demo what i want to achieve (www.daniweb.com)
Send a varible from program which page you are on. And add a class active or inactive and css the class
for eg :
<a href="home.php" class="selectedmenu">Home</a>
<a href="myaccount.php" class="">My Account</a>
Now give background-image for the class selected menu so only the home image will have the active background . If you are not using sprite then do like this
<li id="home"><a href="home.php" class="selectedmenu">Home</a></li>
<li id="myaccount"><a href="myaccount.php" class="">My Account</a></li>
then call
#home .selectedmenu{
background-image:url('homeselected.png');
}
To send variable
<?php
$menuSelected ='home';
?>
<a href="home.php" class="<?php if ($menuSelected=='home')echo ('selectedmenu');?>">Home</a>
精彩评论