I hope this question makes sense
So, I have different elements on the navigation menu selected depending on what page a visitor is on. For example, on the home page, the nav looks like this:
but on the Try it free page, it should look like this:
i’m using CSS to do the selected effect.
However, I want to have a common header.php file across all my pages; how do I automate what navigation element is selected based on what page the user is on with one common header, without having to manually change it for each page?
htmlcode:
<ul id="navigation"> <li class="selected"><a href="#">Home</a></li> <li><a href="#">Try it Free</a></li> <li><a href="#">Features</a></li> <li><a href="#">Demo Videos</a></li> <li><a href="#">Examples</a></li> <li><a href="#">Reviews</a></li> <li><a href="#">Support</a></li> <li><a href="#">Buy</a></li> </ul>
CSS code:
#navigation { display:inline; margin-top:12px; float:right;} #navigation li { display:block; float:left; background:url(../images/navigation-li-bg.gif) no-repeat top left; height:23px; margin-right:5px;} #navigation a { display:block; background:url(../images/navigation-a-bg.gif) top right no-repeat; height:23px; padding: 0 8px; text-decoration:none; color:#fff; font-size:13px; line-height:22px;} #navigation a:hover { background-position:bottom right; color:#bbddff;} *html #navigation a:hover { background-position:top right; color:#bbddff;} #navigation li:hover { background-position:bottom left;} #navigation .selected a { background-position:bottom right; color:#bbddff;} #navigation .selected { background-position:bottom left;} *html #navigation .selected a { background-position:top right; color:#bbddff;} *html #navigation .selected { background-position:top left;}
help plz
Does that make sense?
whoops, got it. i can just do it with this
<?php if ($_SERVER['PHP_SELF']=="/index.php" || $_SERVER['PHP_SELF']==""){ echo " class="selected""; }?>