How to properly build a navigation menu that highlights the current page

Question

I\'ve setup a menu for a fairly simple site based on icant.co.uk. It\'s fairly simple with maybe 5 pages. The small site is mainly a mysql browser for a few tables using MATE.

Answer 1

What I normally do is something like (for all elements...):

<li class="<?php if (condition) echo 'selected'; ?>">content part, links, etc.</li>

Answer 2

A more concise way of doing it (if you have short tags enabled) would be:

<li class="<?= $test=="your_page_name" ? 'selected' : 'not_selected'?>">Link Name</li>

It performs the same function as the first answer, just more concisely.

Answer 3

Here's a snippet from a project of mine. It it old ugly code, and uses tables, but you can just as easily use the idea for divs and cleaner markup. The trick is to make the navigation use a different class if the current page matches it's url.

    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_home.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_home.php'>Billing Home</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_schedules.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_schedules.php'>Billing Schedules</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_outstanding.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_outstanding.php'>Outstanding</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_list.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_list.php'>List All</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_history.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_history.php'>Billing History</a></td></tr>
    <td><a class='LeftSubNavLink<?php if($_SERVER["SCRIPT_NAME"] == "/admin/billing_statement_history.php"){print("Current");}?>' href='<?php print(MAIN_URL); ?>admin/billing_statement_history.php'>Statement History</a></td></tr>

Answer 4

Not sure if that's what you meant, but this way you'll get rid of this ugly if-else:

$currentFile = Explode('/', $_SERVER["PHP_SELF"]);
$currentFile = $currentFile[count($currentFile) - 1];

// easier to manage in case you want more pages later
$pages = array(
    array("file" => "orders.php", "title" => "Orders"), 
    array("file" => "customers.php", "title" => "Customer List")
);
$menuOutput = '<ul>';
foreach ($pages as $page) {
   $activeAppend = ($page['file'] == $currentFile) ? ' id="active"' : "";
   $menuOutput .= '<li' . $activeAppend . '>'
               .  '<a href="' . $page['file'] . '">' . $page['title'] .'</a>'
               .  '</li>'; 
}           
$menuOutput .= '</ul>';

echo $menuOutput;