I am having difficulty getting the php include for my menu to show the active page on my site. When the site is using just plain html to show the active page, it works as expected. But when I switch to the php include the menu is not styling to show the selected page.
Here is the html code for the menu when I am using just plain html, this gives me the desired effect
<nav id="mainnav">
<ul>
<li><a class="selected" href="index.html">Home</a></li>
<li><a href="geckocollection.html">Gecko Collection</a></li>
<li><a href="about.html">About</a></li>
<li><a href="shippingterms.html">Shipping and Terms</a></li>
<li><a href="emailus.html">Email Us</a></li>
</ul>
</nav>
When I switch to the php include this is the code I am using
To identify the page I am on, I am using the following above my !DOCTYPE
<?php $thisPage='Home'; ?>
with the following php include to call the menu
<?php include("navigation.php"); ?>
My navigation.php code is as follows
<nav id="mainnav">
<ul>
<li<?php echo ($thisPage == 'Home') ? ' class="selected"' : ''; ?>>
<a href="index.php">Home</a></li>
<li<?php echo ($thisPage == 'Gecko Collection') ? ' class="selected"' : ''; ?>>
<a href="geckocollection.php">Gecko Collection</a></li>
<li<?php echo ($thisPage == 'Links') ? ' class="selected"' : ''; ?>>
<a href="links.php">Links</a></li>
<li<?php echo ($thisPage == 'Shipping and Terms') ? ' class="selected"' : ''; ?>>
<a href="shippingterms.php">Shipping and Terms</a></li>
<li<?php echo ($thisPage == 'Email Us') ? ' class="selected"' : ''; ?>>
<a href="emailus.php">Email Us</a></li>
</ul>
</nav>
The CSS code for the navigation menu to show the selected tab.
nav#mainnav ul li a.selected {
background-color: #fff;
border: 2px solid #444;
color: #005bff;
text-decoration: none;
}
nav#mainnav ul li a.selected:hover {
color: #005bff;
}
The page loads fine and the hover effect works when I am using the php include, just need to figure out why the menu is not reflecting the selected page.
