I want to create current state for my nav links in my website. For example when I click "Contacts" the link refers me to contacts page and I want the link "contacts" in nav to change his color.
The problem is that I'm including the header from external html file in all my webpages with php. So if I edit this external header file the changes will affect all other pages not only the contacts page.
You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically.
That probably didn't make much sense, so here's an example:
<body id="index">
<div id="menu">
<ul>
<li class="index" ><a href="index.html">Index page</a></li>
<li class="contact" ><a href="contact.html">Page 1</a></li>
</ul>
</div> <!-- menu -->
</body>
In your contact.html, you would set the id of the body to: id="contact".
Finally in your CSS you have something like the following:
#index #menu .index, #contact #menu .contact{
font-weight: bold;
}
You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update.
It's not dynamic, but it's one method that's simple to do, and you can just include the menu html from a template file using PHP or similar.