set background color when active - php

Question

I am making a portfolio website. In the menu I have the follwing itmes:
Home, Services, Portfolio(dropdown), About me, Contact.
Under projects I have to following folder structure:
Website root -> Portfolio -> projectName.html
When a menu item is active it has a blue background. As it is now, it is only html, so I have assign the correct header, everytime I make a new page there has to be under fx Portfolio. To summary up. I have 5 different headers, where each header have the specific choosen menu blue background attached.
I would like to use 1 header where the function is: If I click on "About me" the "active class" is called, which means the blue background is active. If I click projectName.html under Portfolio the Portfolio menu is active with a blue background.
The only way I know how to make that work is if there exist a user log in, and a session. Can I do something with CSS like this?
<!-- begin nav -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span>Tap me!</span>
</button>
<!-- begin logo in navigation -->
<a class="navbar-brand" href="index.php">
<img src="images/webdesign_Logo.png">
</a>
<!-- end logo in navigation -->
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-pills nav-main pull-right">
<!-- begin navigation items -->
<li class="active">Home</li>
<li>
Services
</li>
<li class="dropdown">
Portfolio
<ul class="dropdown-menu">
<li>
Portfolio 2 Column
</li>
<li>
Portfolio 3 Column
</li>
<li>
Portfolio 4 Column
</li>
<li>
Portfolio Single Item
</li>
<li>
Portfolio Single Full Width
</li>
<li>
Portfolio Single Options
</li>
<li>
Blog
</li>
</ul>
</li>
<li>
About Me
</li>
<li>Contact</li>
<!-- end navigation items -->
</ul>
</div>
</div>
</div>
</div>
</nav>
<!-- end nav -->

Answer 1

You can use css to perform that effect of a blue background when active:
yourDivId li:active{
background-color: blue;
}
yourDivId li:hover{
background-color: lightblue;
}
Using that css you can use JS to change the class to "active" when each li is clicked.
You can see what I mean here:
http://www.w3schools.com/cssref/sel_active.asp
Read this:
Tip: The :active selector can be used on all elements, not only links.
Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :hover selector to style links when you mouse over them.
Note: :active MUST come after :hover (if present) in the CSS definition in order to be effective!
About the JavaScript part you can use this answer on this forum:
$('li a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
From: Add & remove active class from a navigation link

Answer 2

first, i suggest create your nav in separate php file and include it in other file and.
second, use javascript code like this:
<script>
document.getElementById("**yourMenuItems**").children.item(<?php echo $SelectedMenu; ?>).classList.add("active");
</script>
thired, when include your nav file set $SelectedMenu variable.

Answer 3

I suggest to use PHP and this Class to get a basic template system and it also includes a function to add "active" class to menus.
<?php
/**
HOW TO USE THIS CLASS.
In every page:
-----------------------------------------------------------------------------------------------
<?php
require 'Page.php'
$page = new Page('Home', 1); <-- initialize the page object
$page->addJS('path/tojs.js'); <-- add javascripts if needed
$page->addCSS('path/tocss.css') <-- add css if needed
$page->startBody(); <--- start the page body
?>
--HTML HERE--
<?php
$page->endBody(); <--- close the body
echo $page->render('inc/template.php'); <-- render the template
------------------------------------------------------------------------------------------------
**/
class Page {
private $title, $id = 0, $stylesheets=array(), $javascripts=array(), $body;
function __construct($title, $id = 0) {
$this->title = $title;
$this->id = (int)$id;
}
function setTitle($title) {
$this->title = $title;
}
function setId($id){
$this->id = (int)$id;
}
function addCSS($path) {
$this->stylesheets[] = $path;
}
function addJS($path) {
$this->javascripts[] = $path;
}
function startBody() {
ob_start();
}
function endBody() {
$this->body = ob_get_clean();
}
function render($path) {
ob_start();
require($path);
return ob_get_clean();
}
function activeMenu($id){
echo $this->id == $id ? 'active' : '' ;
}
function minifyCSS(){
$buffer = "";
foreach ($this->stylesheets as $css) {
$buffer .= file_get_contents($css);
}
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
}
Then in the template:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php echo $this->title; ?></title>
<?php
foreach ($this->stylesheets as $stylesheet) {
echo '<link href="' . $stylesheet . '" rel="stylesheet" type="text/css" />' . PHP_EOL;
}
//or echo '<style>'.$this->minifyCSS().'</style>'; to get minimized css
?>
</head>
<body>
<nav>
Home
Other Page
</nav>
<?php echo $this->body; ?>
<?php
foreach ($this->javascripts as $javascript) {
echo '<script src="' . $javascript . '"></script>' . PHP_EOL;
}
?>
</body>
</html>