Leave the selected item marked in the menu

Asked

Viewed 93 times

1

I took this example of menu

 $(function(){
        var menu = $('.menu-navigation-round');
        menu.slicknav();
        // Mark the clicked item as selected
        menu.on('click', 'a', function(){
                    var a = $(this);
            a.siblings().removeClass('selected');
            a.addClass('selected');
        });
    });
                            
<nav class="menu-navigation-round">
      <a href="/" class="selected"><i class="fas fa-home"></i> Home</a>
       <a href="/search"><i class="fas fa-search"></i> Busca</a>
       <a href="#"> Anuncie seu imóvel</a>
       <a href="#"><i class="fas fa-envelope"></i>Contato</a>
      <a href="#"><i class="fas fa-users"></i> Sobre nós</a>    
</nav>

The Selected class always goes back to the source if I change pages. When using # the code works normally and is selected the correct one, but if I press Search for example, which goes to another page, the menu selects it but in the page update it is again marked the Home option again.

EDIT 

<div class="user-menu alignright"> 


  {$page = 'busca'}  
  
   <nav class="menu-navigation-round">
   <a href="/"  {if="$page == 'home'"}Class="selected"{else}""{/if}><i class="fas fa-home"></i> Home</a>
   
   <a href="/search" {if="$page == 'busca'"}Class="selected"{else}""{/if} ><i class="fas fa-search"></i> Busca</a>
   
   <a href="#" {if="$page == 'anuncie'"}Class="selected"{else}""{/if} ><i class="fa fa-bullhorn" aria-hidden="true"></i> Anuncie seu imóvel</a>
   
   <a href="#" {if="$page == 'contato'"}Class="selected"{else}""{/if} ><i class="fas fa-envelope"></i> Contato</a>
   
   <a href="#" {if="$page == 'sobre'"}Class="selected"{else}""{/if} ><i class="fas fa-users"></i> Sobre nós</a>   
   </nav>                 
</div>

I made this change now if the page variable is equal to the name of the url it puts the class Selected, and works fine, but I do not know how to change the value of the page variable, if it were in JS it would be the onclick, but how do I do in php this? or in any way that works.

javascript
  • 1

    As it was made, it is structured to SPA. When loading the DOM, the first link already comes with the class .selected. What you need is to load the class on a for the loaded DOM. Or make a Javascript function to be executed when the DOM is fully loaded and add the class to the a correct, relying on the URI... For a large application, the second option will be nothing dynamic...

  • It assigns the value to a variable in PHP and I made it add the class "Selected", now I just need to change the value of the variable $page, I’m not able to think of a way :S

1 answer

0


"- [...] i do not know how to change the value of the page variable [...]"

That variable shall receive a REQUEST_URI duly parsed.

See how it looks:

$page = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);

When you access http://seusite.com.br/search, the variable $page will receive /search.

The interesting thing is that the parse_url will not return possible data passed via GET: http://seusite.com.br/search?q=termo_da_busca will return the /search normally.

Recommended readings: PHP - parse_url and PHP - $_SERVER

  • 1

    Thank you very much, it worked perfectly.

Browser other questions tagged javascript

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