Leave current page highlighted in a page selection menu?

Question

I have a page selection menu whose final appearance (the current page highlighted with a different color) should be generated dynamically because I want to reuse the same menu for numerous pages, as I will do this dynamic marking?

Screenshot of how the menu should look (with the page I’m highlighted):

Rendered HTML code from static menu:

<div id="left_sidebar" class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li role="presentation" class="active"><a href="dashboard.php">Dashboard
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"><a href="hardware-statistics.php">Hardware Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"><a href="hardware-logs.php">Hardware Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"><a href="software-statistics.php">Softwares Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"><a href="software-logs.php">Softwares Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"><a href="site-statistics.php">Site Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"><a href="site-logs.php">Site Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"><a href="advertises-statistics.php">Advertises Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"><a href="advertises-logs.php">Advertises Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"><a href="notices-warnings-errors.php">Notices, Warnings and Errors
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
    </ul>
</div>

Note that I make the highlight of the page that I am through a class

OBS1: I’m wearing a Template Engine the Dwoo Template 2.0 to generate the application interface (including menu).

OBS2: I’m using the PHP to create the data that is passed to the data array (data that is passed to the dwoo object for html fill).

Answer 1

Using the instruction if supported by Dwoo Template I make a comparison between the name of each page and the address of the current page that is inside a variable passed by the data array (data that is passed to the dwoo object for html fill).

The template code is as follows::

<div id="left_sidebar" class="col-md-2">
    <ul class="nav nav-pills nav-stacked">
        <li role="presentation"
            {if 'dashboard.php' == $page}
                class="active"
            {/if}
            ><a href="dashboard.php">Dashboard
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'hardware-statistics.php' == $page}
                class="active"
            {/if}
            ><a href="hardware-statistics.php">Hardware Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'hardware-logs.php' == $page}
                class="active"
            {/if}
            ><a href="hardware-logs.php">Hardware Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'software-statistics.php' == $page}
                class="active"
            {/if}
            ><a href="software-statistics.php">Softwares Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'software-logs.php' == $page}
                class="active"
            {/if}
            ><a href="software-logs.php">Softwares Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'site-statistics.php' == $page}
                class="active"
            {/if}
            ><a href="site-statistics.php">Site Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'site-logs.php' == $page}
                class="active"
            {/if}
            ><a href="site-logs.php">Site Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'advertises-statistics.php' == $page}
                class="active"
            {/if}
            ><a href="advertises-statistics.php">Advertises Statistics
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'advertises-logs.php' == $page}
                class="active"
            {/if}
            ><a href="advertises-logs.php">Advertises Logs
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        <li role="presentation"
            {if 'notices-warnings-errors.php' == $page}
                class="active"
            {/if}
            ><a href="notices-warnings-errors.php">Notices, Warnings and Errors
            <i class="glyphicon glyphicon-chevron-right"></i></a></li>
    </ul>
</div>

and the page itself that is accessed via browser is as follows:

<?php

    require_once '../../../vendor/autoload.php';

    $dwoo = new Dwoo\Core();
    $dwoo->setCompileDir('../../../assets/compiled/');
    $dwoo->setTemplateDir('../../../assets/templates/');

    $data = array();

    $data['page'] = 'dashboard.php';
    $dwoo->output('dashboard.tpl', $data);
?>

so in each new page created with php you can change the position value page data array by placing the page name accessed.

Answer 2

You can do it with jQuery (or pure Javascript if you like):

jQuery(document).load(function($){

   var page = window.location.pathname;

   // remove qualquer parâmetro de url 
   // por exemplo de 'pagina.php?id=10' para 'pagina.php'
   page = page.replace(/\?.+/, ''); 

   // Caso seja uma url amigavel e queria apenas o primeiro parâmetro
   // por exemplo de 'pagina/produto/fogao' para 'pagina'
   page = page.split('/')[0]; 

   // Aplica a classe
   $('#left_sidebar a[href="' + page + '"]').parent() // Seleciona pai
                                          .addClass('active') // Adiciona classe
                                          .siblings() // Seleciona irmãos
                                          .removeClass('active'); // Remove classe
});

Answer 3

You can check if the current page is the content page you opened, the "active" class is printed. Example:

<li role="presentation"<?php echo ($page == 'dashboard') ? ' class="active"' : '' ?>>
     <a href="dashboard.php">Dashboard <i class="glyphicon glyphicon-chevron-right"></i></a>
</li>
<li role="presentation"<?php echo ($page == 'hardware-statistics') ? ' class="active"' : '' ?>>
  <a href="hardware-statistics.php">Hardware Statistics <i class="glyphicon glyphicon-chevron-right"></i></a>
</li>