Reputation: 117
add class active in a complex menu
I saw many questions like mine but I can't write this JS.
I have a menu like this and I need to put the class="active" in the <li> tag of the page where the user is. This nav-bar is in a php file that I include in each page of the site. Sorry but after 28h of coding I am fuse!
<div class="componant-section" id="navbars">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"><span class="fa fa-bars"></span></button>
<img class="logo" src="http://<?php echo $base_url ?>/images/logos.png" alt="" width="127">
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav">
<li><a href="http://<?php echo $base_url ?>/home.php">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Clienti <span class="fa-chevron-down fa"></span></a>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li><a href="http://<?php echo $base_url ?>/function/agg_cliente.php">Aggiungi nuovo...</a></li>
<li><a href="http://<?php echo $base_url ?>/lista_clienti.php">Lista</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Fornitori <span class="fa-chevron-down fa"></span></a>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li><a href="http://<?php echo $base_url ?>/function/agg_fornitore.php">Aggiungi nuovo...</a></li>
<li><a href="http://<?php echo $base_url ?>/lista_fornitori.php">Lista</a></li>
</ul>
</li>
<li><a href="http://<?php echo $base_url ?>/fatture.php">Fatture</a></li>
<li><a href="http://<?php echo $base_url ?>/ddt.php">DDT</a></li>
<li><a href="http://<?php echo $base_url ?>/preventivi.php">Preventivi</a></li>
<li><a href="http://<?php echo $base_url ?>/ndc.php">NDC</a></li>
<li><a href="http://<?php echo $base_url ?>/listini.php">Listini</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Controllo <span class="fa-chevron-down fa"></span></a>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li><a href="http://<?php echo $base_url ?>/check/ck_login.php">Login</a></li>
<li><a href="http://<?php echo $base_url ?>/check/ck_causale.php">Causale</a></li>
<li><a href="http://<?php echo $base_url ?>/check/ck_mezzo.php">Mezzo Trasporto</a></li>
<li><a href="http://<?php echo $base_url ?>/check/ck_iva.php">IVA</a></li>
<li><a href="http://<?php echo $base_url ?>/check/ck_imb.php">Imballo</a></li>
<li><a href="http://<?php echo $base_url ?>/check/ck_art.php">Articoli</a></li>
<li><a href="http://<?php echo $base_url ?>/check/ck_spagg.php">Spese Aggiuntive</a></li>
<li><a href="http://<?php echo $base_url ?>/check/ck_pagam.php">Pagamento</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-icons">
<li><a><span class="fa-user fa"></span>
<span class="hidden-lg"><?php echo $user; ?></span></a></li>
<li><a href="http://<?php echo $base_url ?>/function/logout.php">
<span class="fa-cog fa"></span>
<span class="hidden-lg">Logout</span>
<span class="navbar-new"></span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
Upvotes: 4
Views: 128
Answers (3)
Reputation: 117
I resolved with
<div class="componant-section" id="navbars">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"><span class="fa fa-bars"></span></button>
<img class="logo" src="http://<?php echo $base_url ?>/images/logos.png" alt="" width="127">
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav">
<li id="home"><a href="http://<?php echo $base_url ?>/home.php">Home</a></li>
<li class="agg_cliente lista_clienti dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Clienti <span class="fa-chevron-down fa"></span></a>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="agg_cliente"><a href="http://<?php echo $base_url ?>/function/agg_cliente.php">Aggiungi nuovo...</a></li>
<li id="lista_clienti"><a href="http://<?php echo $base_url ?>/lista_clienti.php">Lista</a></li>
</ul>
</li>
<li class="agg_fornitore lista_fornitori dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Fornitori <span class="fa-chevron-down fa"></span></a>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="agg_fornitore"><a href="http://<?php echo $base_url ?>/function/agg_fornitore.php">Aggiungi nuovo...</a></li>
<li id="lista_fornitori"><a href="http://<?php echo $base_url ?>/lista_fornitori.php">Lista</a></li>
</ul>
</li>
<li id="fatture"><a href="http://<?php echo $base_url ?>/fatture.php">Fatture</a></li>
<li id="ddt"><a href="http://<?php echo $base_url ?>/ddt.php">DDT</a></li>
<li id="preventivi"><a href="http://<?php echo $base_url ?>/preventivi.php">Preventivi</a></li>
<li id="ndc"><a href="http://<?php echo $base_url ?>/ndc.php">NDC</a></li>
<li id="listini"><a href="http://<?php echo $base_url ?>/listini.php">Listini</a></li>
<li class="ck_login ck_causale ck_mezzo ck_iva ck_imb ck_art ck_spagg ck_pagam dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Controllo <span class="fa-chevron-down fa"></span></a>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="ck_login"><a href="http://<?php echo $base_url ?>/check/ck_login.php">Login</a></li>
<li id="ck_causale"><a href="http://<?php echo $base_url ?>/check/ck_causale.php">Causale</a></li>
<li id="ck_mezzo"><a href="http://<?php echo $base_url ?>/check/ck_mezzo.php">Mezzo Trasporto</a></li>
<li id="ck_iva"><a href="http://<?php echo $base_url ?>/check/ck_iva.php">IVA</a></li>
<li id="ck_imb"><a href="http://<?php echo $base_url ?>/check/ck_imb.php">Imballo</a></li>
<li id="ck_art"><a href="http://<?php echo $base_url ?>/check/ck_art.php">Articoli</a></li>
<li id="ck_spagg"><a href="http://<?php echo $base_url ?>/check/ck_spagg.php">Spese Aggiuntive</a></li>
<li id="ck_pagam"><a href="http://<?php echo $base_url ?>/check/ck_pagam.php">Pagamento</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-icons">
<li><a><span class="fa-user fa"></span>
<span class="hidden-lg"><?php echo $user; ?></span></a></li>
<li><a href="http://<?php echo $base_url ?>/function/logout.php">
<span class="fa-cog fa"></span>
<span class="hidden-lg">Logout</span>
<span class="navbar-new"></span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
and javascript
window.onload=function(){
var Navid = document.getElementById(window.location.href.split('/').pop().split('.')[0]);
if(Navid){
Navid.setAttribute('class','active');
var father = Navid.parentNode,
grandFather = father.parentNode;
grandFather.setAttribute('class','active');
}
}
Upvotes: 2
Reputation: 2772
You could use something a simple as this Javascript solution.
window.onload=function(){
var Nav=document.getElementById(window.location.href.split('/').pop().split('.')[0]);
if(Nav){
Nav.setAttribute('class','active');
}}
How does it work?
Elements you wish to add the class to must have an ID matching the page name
Example
From: <a href="http://<?php echo $base_url ?>/fatture.php">Fatture</a>
To: <a id="fatture" href="http://<?php echo $base_url ?>/fatture.php">Fatture</a>
The javascript above will strip down the clients location www.something.com/fatture.php to fatture by splitting the string from / creating an array. The name of the file is last in the array so pop() is used to select the last item in the array leaving you with fatture.php the string is split once again at . creating a new array, the first item in that array is then used in the ID selector "fatture". document.getElementById('fatture')
URL Breakdown
1) window.location.href = www.something.com/fatture.php
2) .split('/') =>
- array[0] = www.something.com
- array[1] = fatture.php
3) .pop() = Last array/array[1] of .split('/') - fatture.php
4) .split('.')[0] = fatture
If you have any questions about the source code above please leave a comment below and I will reply as soon as possible.
I hope this helps. Happy coding!
Upvotes: 0
Reputation: 696
You can access the path accessed successfully most of the time in PHP by using the global server request URI variable $_SERVER['REQUEST_URI'].
Simply, you need to compare the value of $_SERVER['REQUEST_URI'] to the target of the links in your navigation, and apply a class if it matches. For example:
<li><a href="/ddt.php" <?php echo $_SERVER['REQUEST_URI'] === '/ddt.php' ? 'class="active"' : '' ?>>DDT</a></li>
As a sidenote, you need not use PHP to generate absolute links for your hrefs in HTML - just use relative paths, e.g. /listini.php instead of http://<?php echo $base_url ?>/listini.php.
Your life would be much easier if you looked into using a templating language such as Twig, that separates the logic that dictates how a page should be displayed from the actual layout code.
Upvotes: 1
Related Questions
- How can I add a key/value pair to a JavaScript object?
- Angular: conditional class with *ngClass
- How can I change an element's class with JavaScript?
- How can I add new array elements at the beginning of an array in JavaScript?
- How to get a JavaScript object's class?
- How to add a class to a given element?
- How to add days to Date?
- What is the best way to add options to a select from a JavaScript object with jQuery?
- Bootstrap nav collapse - Menu items not aligning in toggle dropdown
- Select drop down menu for nav on collapse