I have menu as follows
<ul>
<li><a href="index.php">Home</a></li>
</ul>
how to make it Active when I visit that Page. I tried as follows but no luck
#navigation a:active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
I'm new webie thanks for any suggestions
Add id to your code as below
Update
<div id="menu">
<ul>
<li id="myHome"><a href="index.php">Home</a></li>
</ul>
</div>
Write Script as Below
<script>
window.onload = menuSelect('myHome');
</script>
In your index.php page, you need to edit the HTML this way:
<ul>
<li><a href="index.php" class="active">Home</a></li>
</ul>
In other pages, say about.php, you might have something like this:
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php" class="active">About</a></li>
</ul>
And change the CSS to .active and not :active, as the second one is a state of element:
#navigation a.active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
It doesn't work like that. You need to make your own logic to put a class on the element (or hardcode it if it's a static html page) like this:
<li class="current"><a href="index.php">Home</a></li>
and then assign the css by class:
#navigation li.active a {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
The :active pseudo-selector is for when an element is well, active, for example while a link is being clicked.
What you will need to do is give your <a> element a class attribute and style it accordingly.
Each page has a class on the body tag that identifies it:
BODY OF HOME PAGE:
<body class="home">
<ul>
<li><a href="index.php" class="home">Home</a></li> //Each navigation item also includes a class identifying that particular link.
<li><a href="aboutUs.php" class="aboutUs">About Us</a></li>
</ul>
</body>
BODY OF ABOUT US PAGE:
<body class="aboutUs">
<ul>
<li><a href="index.php" class="home">Home</a></li>
<li><a href="aboutUs.php" class="aboutUs">About Us</a></li>
</ul>
</body>
Then you target those classes in your CSS, defining a different state for the current page:
CSS STYLE:
body.home a.home, body.aboutUs a.aboutUs{
//HERE GOES YOUR CSS
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}