adding a class in the navigation menu - php

Question

Considering the case, that I have the following menu:
<ul>
<li>Index</li>
<li>About</li>
<li>Test<li>
</ul
And the menu is located in header.php . For each page (Index, About, Test), I have index.php, about.php and test.php, and all these files include the header.php !
What I need is adding a class to the li when we are on different pages. So if we are on the about.php, the class should be added on the second li.
Is there any way to do with jQuery, or what are the ways to handle this problem?

Answer 1

<ul>
<li><a href="index.php" <?php if($_SERVER['PHP_SELF']=="/index.php") echo 'class="someclass"'; ?> >Index</a></li>
<li><a href="about.php" <?php if($_SERVER['PHP_SELF']=="/about.php") echo 'class="someclass"'; ?> >About</a></li>
<li><a href="test.php" <?php if($_SERVER['PHP_SELF']=="/test.php") echo 'class="someclass"'; ?> >Test</a><li>
</ul>
This might not be the best method, but it does the task serverside.

Answer 2

I use something like this on one of my static HTML websites, which you can adapt:
<div id="navigation">
<?php $currentPath = $_SERVER['REQUEST_URI']; ?>
<?php $currentClass = ' class="current"'; ?>
<ul id="nav">
<li<?php if( $currentPath == "/" ) { echo $currentClass; } ?>>Home</li>
<li<?php if( $currentPath == "/market-challenge/" ) { echo $currentClass; } ?>>Market <br />Challenge</li>
<li<?php if( $currentPath == "/environmental-benefits/" ) { echo $currentClass; } ?>>Environmental <br />Benefits</li>
<li<?php if( $currentPath == "/technology/" ) { echo $currentClass; } ?>>Technology</li>
<li<?php if( $currentPath == "/contact/" ) { echo $currentClass; } ?>>Contact</li>
</ul>
</div>
Enjoy!

Answer 3

Create unique id for each of the li tags, the when the link is click on change the class if using jquery .attr function

Answer 4

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
jQuery('.nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('active');
}
});
});
</script>
Replace '.nav li' with something more appropriate to your DOM structure. Such as if your wrapper div has a class of menu, do:jQuery('.menu li')

Answer 5

Add a session variable that stores current page (before including header file). Check this value in header file and assign class.
$_SESSION['currentPage'] = 'index';
$_SESSION['currentPage'] = 'about';
$_SESSION['currentPage'] = 'test';
in header,
<ul>
<li><a href="index.php" <?php if($_SESSION['currentPage']=="index") echo 'class="selected"' ?>>Index</a></li>
<li><a href="about.php" <?php if($_SESSION['currentPage']=="about") echo 'class="selected"' ?>>About</a></li>
<li><a href="test.php" <?php if($_SESSION['currentPage']=="test") echo 'class="selected"' ?>>Test</a><li>
</ul>

Answer 6

Using shorthand if for in my opinion cleaner code.
<?php $self = $_SERVER['PHP_SELF']; ?>
<ul>
<li><a href="index.php" <?php echo ($self == "/index.php" ? 'class="selected"' : ''); ?>>Index</a></li>
<li><a href="about.php" <?php echo ($self == "/about.php" ? 'class="selected"' : ''); ?>>About</a></li>
<li><a href="test.php" <?php echo ($self == "/test.php" ? 'class="selected"' : ''); ?>>Test</a></li>
</ul>

Answer 7

For Above issue, i have done solution on codebins using jQuery.
DEMO: http://codebins.com/bin/4ldqpa4
Here i have mentioned steps for executing above solution.
1) Include latest jQuery.js and querystring-0.9.0.js javascript files in header tag.
2) HTML
<div id="panel">
<ul class="menu">
<li>
<a href="#?page=0">
Index
</a>
</li>
<li>
<a href="#?page=1">
About
</a>
</li>
<li>
<a href="#?page=2">
Test
</a>
<li>
</ul>
</div>
3) CSS
ul.menu{
border:1px solid #112266;
background:#ccc;
}
ul.menu li{
list-style:none;
display:inline-block;
margin-left:10px;
padding:0px;
width:60px;
text-align:center;
}
ul.menu li:hover{
background:#343434;
}
ul.menu li a{
padding:0px;
color:#113399;
text-decoration:none;
}
ul.menu li:hover a{
color:#c6b744;
text-decoration:underline;
}
ul.menu li.active{
background:#343434;
}
ul.menu li.active a{
color:#c6b744
}
4) jQuery:
$(function() {
$(".menu li").click(function() {
setTimeout(function() {
var page = $.QueryString("page");
$(".menu li").removeClass("active");
$(".menu li:eq(" + page + ")").addClass("active");
}, 200);
});
});
On above solution, i have to set href link like #?page= because on bins to run java script with new page redirection is not possible on bins as well as i have to use setTimeout function because currently page is not redirected just change its query string on same page by #?page=.
If you want to use above solution in your project then put above jQuery script on common place so that it will executes on each menu links and sets current page link with active class.
Note: Remove setTimeout function Wrapper just keep there code line scripts inside it. It's look like as below:
$(function() {
$(".menu li").click(function() {
var page = $.QueryString("page");
$(".menu li").removeClass("active");
$(".menu li:eq(" + page + ")").addClass("active");
});
});