Andrew
Andrew

Reputation: 3589

How to change the style of an active menu with php + css

So, I'm writing a menu and I want it to stay a certain color based upon it being on that page. I've added "class = 'active'" onto the page, and I've tried adding it to CSS, but it's not working. Any ideas?

PHP code:

<?php
$currentPage = basename($_SERVER['REQUEST_URI']);
print "<div id = 'submenu-container'>";
print "<div id = 'submenu'>";
print "<ul class = 'about'>";
print "     <li><a  href='about.php#about_intro.php'if($currentPage=='about.php#about_intro.php' || $currentPage=='about.php') echo 'class='active''>About</a></li>";
print "     <li><a href='about.php#about_team.php'if($currentPage=='about.php#about_team.php') echo 'class='active''>Team</a></li>";
print "     <li><a href='about.php#about_services.php' if($currentPage=='about.php#about_services.php') echo 'class='active'>Services</a></li>";            
print " </ul>";
print "</div>";
print"</div>";
?>

CSS:

#submenu ul li a .active {
background:#FFF;    
}

Upvotes: 0

Views: 917

Answers (2)

heximal
heximal

Reputation: 10517

print "     <li><a  href='about.php#about_intro.php'if($currentPage=='about.php#about_intro.php' || $currentPage=='about.php') echo 'class='active''>About</a></li>";

doesn't make sense. all this string will be outputted and displayed in html. you must use string concatenation:

$cl = ($currentPage=='about.php#about_intro.php' || $currentPage=='about.php')?" class='active'": "";
print "<li><a  href='about.php#about_intro.php' $cl>About</a></li>";

Upvotes: 1

gcochard
gcochard

Reputation: 11744

$_SERVER['REQUEST_URI'] will never contain the portion after the hash. It will only show up to about.php and any URL arguments passed with the ?. You should create specific pages for each of these, give the about_intro/about_team/about_services in a query string instead of a hash, or add the active class with javascript.

Additionally, don't use an if statement when inside of another statement. Use the ternary operator.

print "<li><a href='about.php'"
    .$currentpage=="about.php"?" class='active'":""
    .">About</a></li>";

Upvotes: 1

Related Questions