How to set current page “active” in php

Question

Hi I have a menu on my site on each page, I want to put it in it\'s own menu.php file but i\'m not sure how to set the class=\"active\" for whatever page i\

Answer 1

there is two things you can do.

first you can read the current filename of the php file you request by using $_SERVER['PHP_SELF'] or $_SERVER['REQUEST_URI'] or any other $_SERVER global variables that you can use to read your current page and compare it with the link's url, something like this

  <a href="offnungszeiten.php" <?php if($_SERVER['PHP_SELF']=='offnungszeiten.php'){ ?>class="activatepage" <?php } ?> >
       Öffnungszeiten
    </a>

the second one is to create a variable that you can read globally that would store the current name of the current page, like this

<?php
$cur_page ="offnungszeiten"
?>

<a href="offnungszeiten.php" <?php if($cur_page=='offnungszeiten'){ ?>class="activatepage" <?php } ?> >
 Öffnungszeiten
</a>

Answer 2

I have a similar issue with my web app menu. I also have sub menus which do not appear as top level menu buttons.

My solution is as follows:

a) Partial php file with menu html and a little php function at the top that checks GET variables against the menu buttons. I have two GET variables to check: the page and (if necessary) the menu_button.

b) Adding any new php page with a href links to either menu pages or sub menu pages.

The variable "menu_button" is optional and can be used to link to submenu php files.

Of course the security concerning GET variables should be considered.

From my point of view, this solution has less effort than having to maintain an array of pages or links somewhere. You just use a get variable "menu_button" where you pass the top level menu button that should be marked visually in any link which targets your php file.

Code examples:

Partial menu.php (has to be included in every php file):

<?php
  function active($page_link){
    $menu_button = $_GET("menu_button") ?: $_GET("page");  // sets the menu button either to the given top level menu or it defaults to the page itself
    if($menu_button === $page_link) return "active";
  }
?>

<div>
<a href="?page=one" class="<?= active('one') ?>"Link one</a>
<a href="?page=two" class="<?= active('two') ?>">Link two</a>
</div>

Any php file with links to sub menu file:

<div>
 <a href="?page=one">Link one</a>
 <a href="?page=three&menu_button=two">Link to sub menu page "three" of menu "two"</a>
</div>

Works for me. Hope someone else can use this.

Answer 3

Assume you have a navbar with the following items:

<ul>
   <li id="menu-item-home"><a href="index.php">HOME</a></li>
   <li id="menu-item-services"><a href="/services.php">SERVICES</a></li>
   <li id="menu-item-about-us"><a href="/about-us.php">ABOUT US</a></li>
   <li id="menu-item-contact"><a href="/contact.php">CONTACT</a></li>      
</ul>

Then, declare a javascript variable in each page as below:

<script>
    <?php echo("var active = 'menu-item-home';"); ?>
</script>

The variable "active" is assigned with the corresponding item of each page.

Now, you can use this variable to highlight the active menu item as below.

$(window).ready(function(){$("#" + active).addClass("active");});

Answer 4

Send page name in query string and check it on every page by getting the variable.

Answer 5

A bit late on the ball, but I just had to solve this myself and ended up using this Javascript method, with a small modification. This has the advantage on not requiring many changes to the current code, just run the script and voila.

window.onload = activateCurrentLink;

function activateCurrentLink(){
    var a = document.getElementsByTagName("A");
    for(var i=0;i<a.length;i++)
        if(a[i].href == window.location.href.split("#")[0])
            a[i].className = 'activelink';
}

Answer 6

Better late than never - I like to keep it simple, to be honest, especially if there's a ton of scripting and PHP going on.

I place this code on the top of each page to identify the page:

<?php
  $current_page = 'home';
  include 'header.php';
?>

Then your menu/navigation (mine is bootstrap 4) looks like this:

<ul class="navbar-nav mx-auto">
  <li class="nav-item <?php if ($current_page=="home") {echo "active"; }?>">
      <a class="nav-link" href="<?php echo SITEURL;?>/">Home</a>
  </li>
  <li class="nav-item <?php if ($current_page=="about") {echo "active"; }?>">
      <a href="<?php echo SITEURL;?>/about" class="nav-link ">About</a>
  </li>
  <li class="nav-item <?php if ($current_page=="store") {echo "active"; }?>">
      <a href="<?php echo SITEURL;?>/store" class="nav-link">Store</a>
  </li>
  <li class="nav-item <?php if ($current_page=="news") {echo "active"; }?>">
        <a href="<?php echo SITEURL;?>/news" class="nav-link">News</a>
  </li>
  <li class="nav-item <?php if ($current_page=="contact") {echo "active"; }?>">
      <a href="<?php echo SITEURL;?>/content/contact-us" class="nav-link ">Contact</a>
  </li>
</ul>

I'm not saying this is the optimal method, but it works for me and it's simple to implement.