How do I insert the active class depending on the page the user is on?

Question

How do I insert the active class depending on the page the user is on?

Navigation

#1 by (0 votes)

0

I have this code:

function showNavbar(){
    echo "<ul class='nav nav-list'>
    <li class='active'>
        <a href='index.php'>
            <i class='menu-icon fa fa-tachometer'></i>
            <span class='menu-text'> Painel </span>
        </a>

        <b class='arrow'></b>
    </li>";

    if(empty($_SESSION['tipo'])):
        echo "<li class=''>
    <a href='#'>
        <i class='menu-icon fa fa-desktop'></i>
        <span class='menu-text'> Escritório Virtual </span>
    </a>

    <b class='arrow'></b>
</li>";else: 
echo "<li class=''>
<a href='#' class='dropdown-toggle'>
    <i class='menu-icon fa fa-desktop'></i>
    <span class='menu-text'>
        Escritório Virtual
    </span>

    <b class='arrow fa fa-angle-down'></b>
</a>

<b class='arrow'></b>

<ul class='submenu'>
    <li class=''>
        <a href='lista.php'>
            <i class='menu-icon fa fa-caret-right'></i>
            Empresas
        </a>

        <b class='arrow'></b>
    </li>
</ul>
</li>";endif;
echo "
<li class=''>
    <a href='lista2.php'>
        <i class='menu-icon fa fa-barcode'></i>
        <span class='menu-text'> Boletos</span>
    </a>

    <b class='arrow'></b>
</li>

<li class=''>
    <a href='lista3' class='dropdown-toggle'>
        <i class='menu-icon fa fa-calculator'></i>
        <span class='menu-text'> Notas Fiscais </span>

        <b class='arrow fa fa-angle-down'></b>
    </a>
</li>           
</ul>";
}

What it does:

It mounts the entire side navigation bar. I made it into a function so I do not have to keep repeating it every time and help at the time of maintenance.

My Problem

As you can see the 1st <li> is with the active class, which demonstrates that this is the page the user is giving a little highlight:

The problem is that if I use the code by calling it this way:

<?php showNavbar(); ?>

Only the 1st% of% index is going to be with the active class, always . How can I get the name of the page and then put the active class on the correct page and not always on the 1st?

php nav-bar

asked by anonymous 01.08.2017 / 17:23

1 answer

How to check the value in the 3rd layer in Firebase with angularfire2? Unserialize Codeigniter - Ajax data?

score 0 · Answer 1

Puts a id on the ul of the main menu and also places a id on each item.

When you call your function to print the menu it passes the id that you want to activate on that page, for example I want you to activate the Business menu:

<?php showNavbar("mnEmpresas"); ?>

At the end of this function, you add script to be printed:

function showNavbar($idMenuAtivo){
    echo "
        <ul id='menu' class='nav nav-list'>
            <li id='mnPainel'>
                <a href='index.php'>
                    <i class='menu-icon fa fa-tachometer'></i>
                    <span class='menu-text'> Painel </span>
                </a>
                <b class='arrow'></b>
            </li>
    ";

    if(empty($_SESSION['tipo'])):
        echo "
            <li id='mnEscritorioVirtual'>
                <a href='#'>
                    <i class='menu-icon fa fa-desktop'></i>
                    <span class='menu-text'> Escritório Virtual </span>
                </a>
                <b class='arrow'></b>
            </li>
        ";
    else: 
        echo "
            <li id='mnEscritorioVirtual'>
                <a href='#' class='dropdown-toggle'>
                    <i class='menu-icon fa fa-desktop'></i>
                    <span class='menu-text'>
                        Escritório Virtual
                    </span>
                    <b class='arrow fa fa-angle-down'></b>
                </a>
                <b class='arrow'></b>
                <ul class='submenu'>
                    <li id='mnEmpresas'>
                        <a href='lista.php'>
                            <i class='menu-icon fa fa-caret-right'></i>
                            Empresas
                        </a>
                        <b class='arrow'></b>
                    </li>
                </ul>
            </li>
        ";
    endif;
    echo "
            <li id='mnBoletos'>
                <a href='lista2.php'>
                    <i class='menu-icon fa fa-barcode'></i>
                    <span class='menu-text'> Boletos</span>
                </a>
                <b class='arrow'></b>
            </li>
            <li id='mnNotasFiscais'>
                <a href='lista3' class='dropdown-toggle'>
                    <i class='menu-icon fa fa-calculator'></i>
                    <span class='menu-text'> Notas Fiscais </span>
                    <b class='arrow fa fa-angle-down'></b>
                </a>
            </li>           
        </ul>
        <script type='text/javascript'>
            $('#menu #<? echo $idMenuAtivo; ?>').addClass('active');
        </script>
    ";
}