Multidimensional Array PHP in CSS

Question

I have a problem in my web app.

I'd like to make a menu, when menu clicked it'll be active in css.

Code below is my index.php

<?php
    include 'menu.php';
    $page = $_GET['page'];
    switch ($page) {
      case 'endCart':
        include 'endCart.php';
        break;

      case 'trxLog':
        include 'invoice.php';
        break;

      case 'graph':
        include 'graph.php';
        break;

      case 'activeBasket':
        include 'activeBasket.php';
        break;

      case 'logout':
        include 'logout.php';
        break;

      default:
        include 'endCart.php';
        break;
    }

?>

And code below is menu.php

<div class="column" id="sidebar">
  <div class="ui secondary vertical fluid menu">

    <?php

    foreach($sidemenu as $arr){
      echo '<a class="item" href="'.$arr[1].'">'.$arr[0].'</a>';
    }

    ?>
  </div>
</div>

I get variable $sidemenu from array with value below :

$sidemenu = array(
    array('End Cart','index.php?page=endCart', 'endCart'),
    array('Transaction Log','index.php?page=trxLog', 'trxLog'),
    array('Graph','index.php?page=graph', 'graph'),
    array('Active Basket','index.php?page=activeBasket', 'activeBasket')
);

As writen in file menu.php, there is tag <a> with item in its CSS class.

So my problem is when user clicked specific menu in that tag will append CSS class active.

Update!!

This problem has been solved, and here it is my update for menu.php. Big thanks for @Magnus and @Steve to help me solve this.

foreach($sidemenu as $arr){
  echo ($page == $arr[2]) ? "<a class=\"item active\" href=\"".$arr[1]."\">".$arr[0]."</a>" : "<a class=\"item\" href=\"".$arr[1]."\">".$arr[0]."</a>";
}

can you give me some recommendation sources to solve that problem? — Syarif
– Syarif, Commented Sep 5, 2017 at 14:21
Use javascript. that needs to be done on the frontend. php has no idea what has been clicked... @acreativeless — Naftali
– Naftali, Commented Sep 5, 2017 at 14:21
This can definitely be done in PHP since it looks like the page is reloaded on click. PHP has the menus listed and the current URL. — M. Eriksson
– M. Eriksson, Commented Sep 5, 2017 at 14:24

M. Eriksson · Accepted Answer · 2017-09-05 14:38:42Z

2

First, change the order of the page and menu include. That way, $page will be available in your menu.php-file:

// I also added a check to see if that query string exists
$page = isset($_GET['page']) ? $_GET['page'] : '';
include 'menu.php';

In your menu.php, just check if the loop is printing the current url:

foreach($sidemenu as $arr){
    echo '<a class="item ' . $arr[2] == $page ? "active" : null . '" href="'.$arr[1].'">'.$arr[0].'</a>';
}

This will give the current page link the class active.

Edit

I totally missed that $arr[2] already contains the page key. You don't need to build the url to compare it, as I did in my first example. Thanks @steve for pointing that out.

edited Sep 5, 2017 at 14:38

answered Sep 5, 2017 at 14:28

M. Eriksson

13.7k4 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Steve Over a year ago

$arr[2] contains the page key, so you can remove the $currentUrl variable and simply check $arr[2] == $page.

M. Eriksson Over a year ago

@acreativeless Not working in what sense? If you check the source, does the current page link have a class called "active"? Have you styled the "active" class in your css?

Syarif Over a year ago

sorry for the inconvenience @MagnusEriksson, but I'd like to say that the result of your answer is looks like jsfiddle.net/hvu0bqza/2

M. Eriksson Over a year ago

@Syarif - Double check that you implemented the current version. I did edit it a couple of times. The first couple of versions had invalid quoting. If you did, please show how you implemented it.

Syarif Over a year ago

@MagnusEriksson - Thank you very much, I've already checked it and I'll post my recent code then. But, might I update your answer?

|

Collectives™ on Stack Overflow

Multidimensional Array PHP in CSS

Update!!

1 Answer 1

Edit

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update!!

1 Answer 1

Edit

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related