How to activate a navigation item dynamically

Question

How to activate a navigation item dynamically

Asked 8 years, 1 month ago

Viewed 464 times

0

I’m tired of always changing the navbar of all my pages, and I decided to create a file for navbar and always give a include on the pages to make it easier to add/remove items!

Only, my question is whether it has a system in PHP or JavaScript that can identify the page to set the class 'active' in the <li> of navbar corresponding to the current page!

Navbar’s code is as follows::

<div class="container">

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">

      <ul class="nav navbar-nav">

        <li class="active clash"><a href="/">Início</a></li>

        <li class="clash"><a href="/ferramentas/gerador-de-emblema">Gerador de Emblemas</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">

      </ul>

    </div>

  </div>

</nav>

</div>

For example, I’m on the page HOME! Say the id of body is "1". A script could capture this id and assign the class active to the <li> with the id "1"!

1 answer

Browser other questions tagged php javascript jquery

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

by Vinicius Colares • **1,352** points · Answer 1 · 2016-10-20T03:10:24+00:00

A simple and effective option is to compare the return of the url with the value of href in your navigation menu, applying the class in the element when the condition is met.

Solution in PHP(comparing url to href)

<?php $paginaLink = $_SERVER['SCRIPT_NAME'];?>
<li>
  <a href="/blog/"
  <?php 
    if($paginaLink == '/blog/index.php') {echo 'class="ativo"';}
  ?>>
  Blog</a>
</li>

This is not one of my preferred solutions because it ends up soiling a little the HTML from the menu, but it’s very simple and effective.

Solution in Jquery(Comparing attributes)
By taking advantage of your line of reasoning, you can also solve your problem using JQuery comparing for example if the property value name of <body> of your page is equal to the value of the property name of each <li> from the navigation menu.

$("nav ul li").each(function() {
  var page_name = $("body").attr("name");
  var menu_name = $(this).attr("name");
  if(page_name == menu_name){
    $(this).addClass("active");
    return false;  
    // retornando false vc evita que o loop continue iterando,
    // supondo que seu menu não precise de 2 itens com classe ativa
  }
});