Highlight currenct open menu item using php - php

Question

I am trying to highlight currently open menu item using PHP.
HTML for my menu items.
<ul class="menu">
<li>Edit Profile</li>
<li>Edit Contact</li>
<li>Edit Facilities</li>
<li>Edit Location</li>
<li>Manage Images</li>
</ul>
This is how I tried it in PHP:
if ($_SERVER['QUERY_STRING']) {
list($queryString) = explode('&',$_SERVER['QUERY_STRING']);
$openPage = $queryString;
list($key, $value) = explode('=',$openPage);
$currentPage = $value;
// Determine what menu item to be highlight:
switch ($currentPage) {
case 'edit-profile':
$class1 = 'class="active"';
break;
case 'edit-contact':
$class2 = 'class="active"';
break;
case 'edit-facilities':
$class3 = 'class="active"';
-----------
// Default is to include the main page.
default:
$class = 'class=""';
break;
} // End of main switch.
} else {
//Determine The Index page
$path = $_SERVER['PHP_SELF'];
$indexPage = basename($path);
$indexPage = basename($path, '.php');
}
This is how I echo these classes in my menus:
<li <?php if(isset($class1)) echo $class1; ?>>Edit Profile</li>
<li <?php if(isset($class2)) echo $class2; ?>>Edit Contact</li>
This is solution is working for me. But my problem is, if I have lot of pages I need to use many class variables in SWITCH case.
Can anybody tell me is there alternative solution for this to minimize my PHP code?
Hope somebody may help me out.
Thank you.

Answer 1

One simple solution would be to store the menu items in a map, and iterate over them:
$menuItems = [
'edit-profile' => [
'url' => 'index.php?p=edit-profile&error=message',
'name' => 'Edit Profile'
],
'edit-contact' => [
'url' => 'index.php?p=edit-contact',
'name' => 'Edit Contacts'
],
...
]
Then iterate over the items.
<ul class="menu">
<?php
foreach($menuItems as $menuItem => $desc) {
// You get $currentPage from the query string
$class = ($currentPage === $menuItem)? 'class="active"': '';
echo '<li '.$class.'>'.$desc['name'].'</li>';
}
?>
</ul>

Answer 2

With this you don't need SWITCH case.
<li <?php if($currentPage=='edit-profile') echo 'class="active"'; ?>>Edit Profile</li>
<li <?php if($currentPage=='edit-contact') echo 'class="active"'; ?>>Edit Contact</li>

Answer 3

You can use array and try like this
if ($_SERVER['QUERY_STRING']) {
list($queryString) = explode('&',$_SERVER['QUERY_STRING']);
$openPage = $queryString;
list($key, $value) = explode('=',$openPage);
$currentPage = $value;
// Determine what menu item to be highlight:
// Store in array, you will be having only one item in array
$class[$currentPage] = 'class="active"';
} else {
//Determine The Index page
$path = $_SERVER['PHP_SELF'];
$indexPage = basename($path);
$indexPage = basename($path, '.php');
}
and the menu can be
<li <?php if(isset($class['edit-profile'])) echo $class['edit-profile']; ?>>Edit Profile</li>
<li <?php if(isset($class['edit-contact'])) echo $class['edit-contact']; ?>>Edit Contact</li>
Note: this not tested, as I have no access to PHP right now.

Answer 4

Rather than doing all this, just take all your menu items in an array and loop over it.
You are sending page parameter with variable.
So, instead have a control over it while sending itself.
Array of page will have page title as key and page url as value.
This way, you do not need separate variables, single variable in loop will serve the job.
<?php
$pages = array(); // Get all page titles and urls in array.
$pages['Edit Profile'] = 'edit-profile&error=message';
$pages['Edit Contact'] = 'edit-contact';
$pages['Edit Facilities'] = 'edit-facilities';
$pages['Edit Location'] = 'edit-location';
$pages['Manage Images'] = 'edit-images';
if (! empty($pages)) {
$current = (isset($_GET['p'])) ? $_GET['p'] : '';
?>
<ul>
<?php
foreach ($pages as $title => $url) {
$active = ($current == $url) ? 'active' : '';
?>
<li><?php echo $title;?></li>
<?php
}
?>
</ul>
<?php
}
?>

Answer 5

Use PHP to generate your own menu structure but for highlighting we can use Jquery.
See example below:
<style>
.active{ background-color:#3F6}
</style>
<ul class="menu">
<li>Home</li>
<li>Edit Profile</li>
<li>Edit Contact</li>
<li>Edit Facilities</li>
<li>Edit Location</li>
<li>Manage Images</li>
</ul>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<script>
var aurl = window.location.href; // Get the absolute url
$('.menu li a').filter(function() {
return $(this).prop('href') === aurl;
}).parent('li').addClass('active');
</script>