Set active class on current page

Question

I have this navigation, but I can't seem to find a solution to add an .active class to the current page. Can anyone help me here?

<nav class="menu">
  <ul class="menu-ul navigation">
    <div class="menu-first">
      <li><a href="index.php"><span class="main-title">X-BIKES</span></a></li>
    </div>
    <div class="menu-second">
        <li><a href="index.php?page=events">Events</a></li>
        <?php if (empty($_SESSION['user'])): ?>
        <li><a href="index.php?page=login">Login</a></li>
        <li>/</li>
        <li><a href="index.php?page=register">Register</a></li>
      <?php else: ?>
        <li><a href="index.php?page=logout">Logout</a></li>

      <li class="menu-cart">
        <a href="index.php?page=cart">Cart (<?php
          if(empty($_SESSION['cart'])) {
            echo '0';
          }else {
            echo sizeof($_SESSION['cart']);
          };
      ?>)</a>
      </li>
      <?php endif; ?>
    </div>
  </ul>
</nav>

Answer 1

You can use $_GET :

<nav class="menu">
  <ul class="menu-ul navigation">
    <div class="menu-first">
      <li><a href="index.php"><span class="main-title">X-BIKES</span></a></li>
    </div>
    <div class="menu-second">
        <li class="<?php echo $_GET['page'] == "events" ? "active" : ""; ?>" ><a href="index.php?page=events">Events</a></li>
        <?php if (empty($_SESSION['user'])): ?>
        <li class="<?php echo $_GET['page'] == "login" ? "active" : ""; ?>"><a href="index.php?page=login">Login</a></li>
        <li>/</li>
        <li class="<?php echo $_GET['page'] == "register" ? "active" : ""; ?>"><a href="index.php?page=register">Register</a></li>
      <?php else: ?>
        <li class="<?php echo $_GET['page'] == "logout" ? "active" : ""; ?>"><a href="index.php?page=logout">Logout</a></li>

      <li class="menu-cart <?php echo $_GET['page'] == "cart" ? "active" : ""; ?>">
        <a href="index.php?page=cart">Cart (<?php
          if(empty($_SESSION['cart'])) {
            echo '0';
          }else {
            echo sizeof($_SESSION['cart']);
          };
      ?>)</a>
      </li>
      <?php endif; ?>
    </div>
  </ul>
</nav>

And then in the CSS, you can change the link colour:

.navigation a {
  color: blue;
}

.navigation .active a {
  color: red;
}

Answer 2

Use your page parameter to check what link has been clicked and set the class accordingly.

For example you can write something like this at the beginning of your script:

var page = $_GET['page'];

and then later in your code

<a href="index.php?page=events" <?php if (page == 'events') echo 'class="active"' ?>>Events</a>

Hope this is the right syntax. It's been a while since I wrote my last php code.

Answer 3

you can use the $_SERVER['PHP_SELF'] for getting the current page

and after you will compare this current page width your link and add class .active if they are equals

<nav class="menu">
<ul class="menu-ul navigation">
<div class="menu-first">
<li><a href="index.php"><span class="main-title">X-BIKES</span></a>
</li>
</div>
<div class="menu-second">
<li><a <?= $_SERVER['PHP_SELF'] == 'index.php?page=events' ? 
'class="active"' : '' ?> href="index.php?page=events">Events</a></li>
<?php if (empty($_SESSION['user'])): ?>
<li><a href="index.php?page=login">Login</a></li>
<li>/</li>
<li><a href="index.php?page=register">Register</a></li>
<?php else: ?>
<li><a href="index.php?page=logout">Logout</a></li>
<li class="menu-cart">
<a  <?= $_SERVER['PHP_SELF'] == 'index.php?page=cars' ? 
'class="active"' : '' ?> href="index.php?page=cart">Cart (<?php
if(empty($_SESSION['cart'])) {
echo '0';
}else {
echo sizeof($_SESSION['cart']);
};
?>)</a>
</li>
<?php endif; ?>
</div>
</ul> 

Answer 4

Active menu for current page such as contact.php, about.php, we can make variable like $currentpage with asign different value for diffrent page

$currentPage = 'contact'; // current page is contact

In header section like do below

<ul class="nav">
    <li class="<?php if($currentPage =='contact'){echo 'active';}?>" ><a href="contact.php">Contact</a></li>
    <li class="<?php if($currentPage =='about'){echo 'active';}?>" ><a href="about.php">About</a></li>
</ul>