Question

The problem:
I want to use PHP include to import file “header_menu.html” into all pages that share the same navigation menus, but each page has its own current highlighted menu item.

For example, the following are the menus, in index.php, only the first should be set to “current” class, and in download.php, only the second should be current. How to do that with JavaScript? Can you provide a detailed working sample? You know, I don’t want to duplicate the menus in each page…

<li><a href="../index.php" class="current">Home</a></li>
<li><a href="../download.php">Download</a></li>
<li><a href="../purchase.php">Buy</a></li>

Thank you!

---

Edit: PHP solutions are also welcomed!

Answer 1

The best solution is with php. There is a function that tells what page is calling it. You put that in the include and use an if statement to decide which menu item to set to class="current"

Here is the function I found on the internet that helped me do it

<?php
$a = basename($_SERVER['REQUEST_URI'], ".php"); /* supposing filetype .php*/
?>

Then the code in the header would look like

<li <?php if($a=='index' || $a==''){echo("class='current'");}?>><a href='index.php'>Home</a></li>
<li <?php if($a=='download'){echo("class='current'");}?>><a href='download.php'>Download</a></li>