I have a menu file "menu_include.php" thats going to be included in 6 pages. I want each element to change per page. Lets say we are in "about.php" i want the "about" to change colors with no links. How can i do this
A simple way to do this would be to set a variable before including your menu, something like this.
$currentPage = "about"; // change this on each page.
include 'menu_include.php';
then in your menu_include, you could do something like this with each link
<nav role='navigation'>
<ul>
<li><a href="#" <?php if(isset($currentPage) && $currentPage == 'home'){ echo ' class="active" '; } ?> >Home</a></li>
<li><a href="#" <?php if(isset($currentPage) && $currentPage == 'about'){ echo ' class="active" '; } ?> >About</a></li>
<li><a href="#" <?php if(isset($currentPage) && $currentPage == 'clients'){ echo ' class="active" '; } ?> >Clients</a></li>
<li><a href="#" <?php if(isset($currentPage) && $currentPage == 'contact'){ echo ' class="active" '; } ?> >Contact Us</a></li>
</ul>
</nav>
Then you could style the .active
class to change colors as you wish..
.active {
background:lime;
}
Edit: To answer your question, yes you will want to wrap the variable and include in php tags like this.. I didn't put them before, because I assumed you would just put them in your existing php tags.
<?php
$currentPage = "about"; // change this on each page.
include 'menu_include.php';
?>
It sounds like you might want to learn a bit more about php, or even look into using a popular CMS like Wordpress -- http://wordpress.org there are plenty of tutorials/videos that can help you, but unfortunately I can't write ALL of the code for you ;) Trying to help as much as possible.
Update: In response to your last question you can add a hover state to your .onthepage
class.
.menu > li > a.onthepage:hover {
color:#f00;
font-weight:bold;
}
This way it won't change when you hover it, I expect that is what you're going for.