Active class in the include menu

Asked

Viewed 644 times

1

On my pages PHP use a include to call a file that contains my menu:

<?php include("menu.php"); ?>

Menu file:

<li class="current-menu-item"><a href="#">Hosting</a>
<ul>
   <li><a href="hosting-shared.php">SHARED HOSTING</a></li>
   <li><a href="free-hosting.php">FREE HOSTING</a></li>
   <li><a href="cloud-hosting.php">CLOUD HOSTING</a></li>
   <li><a href="reseller-hosting.php">RESELLER HOSTING</a></li>                
</ul>
</li>
   <li><a href="domains.php">DOMAINS</a></li>
   <li><a href="#">Servers</a>
<ul>
   <li><a href="cloud-vps.php">CLOUD VPS</a></li>
   <li><a href="dedicated-servers.php">DEDICATED SERVERS</a></li>
   <li><a href="order-slider.php">ORDER SLIDER</a></li>

When the menu is active gets this class

class="current-menu-item"             

How do I insert the class active only in the menu accessed?

2 answers

1

Do the php menu. thus:

<?php
    /**
    * Verifica o script ativo e compara com $script indicado;
    * Se a comparação for positiva, imprime a CLASS;
    * Se a comparação falhar, retorna FALSE.
    * @return string|boolean
    */
    function setClass($script = NULL){
        $ativo = str_replace('/','',$_SERVER['PHP_SELF']);
        if($ativo == $script){
            echo 'class="current-menu-item"';
        }
        return FALSE;
    }
?>
<li><a <?=setClass('testing.php')?> href="testing.php">Hosting</a>
         <ul>
            <li><a <?=setClass('hosting-shared.php')?> href="hosting-shared.php">SHARED HOSTING</a></li>
            <li><a <?=setClass('free-hosting.php')?> href="free-hosting.php">FREE HOSTING</a></li>
            <li><a <?=setClass('cloud-hosting.php')?> href="cloud-hosting.php">CLOUD HOSTING</a></li>
            <li><a <?=setClass('reseller-hosting.php')?> href="reseller-hosting.php">RESELLER HOSTING</a></li>
         </ul>
</li>
<li><a <?=setClass('domains.php')?> href="domains.php">DOMAINS</a></li>
     <li><a href="#">Servers</a>
         <ul>
            <li><a <?=setClass('cloud-vps.php')?> href="cloud-vps.php">CLOUD VPS</a></li>
            <li><a <?=setClass('dedicated-servers.php')?> href="dedicated-servers.php">DEDICATED SERVERS</a></li>
            <li><a <?=setClass('order-slider.php')?> href="order-slider.php">ORDER SLIDER</a></li>
        </ul>
    </li>

1

This is another PHP-free option!

Once is something visual I believe can be treated on the client side, using Javascript/Jquery.

For example:

var pagina = window.location.pathname.split('/')[ window.location.pathname.split('/').length - 1 ];

$('.menu').find('a[href="'+pagina+'"]').closest('li').addClass('current-menu-item');

Supposing that this:

<div class="menu">
    <li><a href="#">Hosting</a>
    <ul>
       <li><a href="hosting-shared.php">SHARED HOSTING</a></li>
       <li><a href="free-hosting.php">FREE HOSTING</a></li>
       <li><a href="cloud-hosting.php">CLOUD HOSTING</a></li>
       <li><a href="reseller-hosting.php">RESELLER HOSTING</a></li>                
    </ul>
</div>

The JQuery will fetch by a possessed href same as the page the user is accessing, so it will locate the li nearest and then add the class current-menu-item in it.

Basically it will work like this:

  1. Find any class element menu
  2. Finds a with href equal to variable pagina
  3. Finds li nearest
  4. Adds class current-menu-item

Browser other questions tagged

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