How to enter the active class depending on the page the user is in?

Asked

Viewed 88 times

0

I have that 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 does he do:

It mounts the entire sidebar. I did it in a function so I don’t have to keep repeating every time and help at maintenance time.

My Problem

As you can see the first <li> is with the class active, that demonstrates that this is the page the user is, giving a small highlight:

inserir a descrição da imagem aqui

The problem is that if I use the code calling him that way:

<?php showNavbar(); ?>

Only the first <li> which is the index will get the class active, at all times. How can I get you to take the name of the page and then place the class active on the right page and not always on the first page?

1 answer

0

Puts a id in ul main menu and also puts a id in each item.

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

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

And at the end of that function adds a 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>
    ";
}
  • I didn’t understand, could you give me an example, for example on the page called listUsu.php?

  • I edited my answer

Browser other questions tagged

You are not signed in. Login or sign up in order to post.