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>Home</li>
<li class="dropdown">
Clienti <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li>Aggiungi nuovo...</li>
<li>Lista</li>
</ul>
</li>
<li class="dropdown">
Fornitori <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li>Aggiungi nuovo...</li>
<li>Lista</li>
</ul>
</li>
<li>Fatture</li>
<li>DDT</li>
<li>Preventivi</li>
<li>NDC</li>
<li>Listini</li>
<li class="dropdown">
Controllo <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li>Login</li>
<li>Causale</li>
<li>Mezzo Trasporto</li>
<li>IVA</li>
<li>Imballo</li>
<li>Articoli</li>
<li>Spese Aggiuntive</li>
<li>Pagamento</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>
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">Home</li>
<li class="agg_cliente lista_clienti dropdown">
Clienti <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="agg_cliente">Aggiungi nuovo...</li>
<li id="lista_clienti">Lista</li>
</ul>
</li>
<li class="agg_fornitore lista_fornitori dropdown">
Fornitori <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="agg_fornitore">Aggiungi nuovo...</li>
<li id="lista_fornitori">Lista</li>
</ul>
</li>
<li id="fatture">Fatture</li>
<li id="ddt">DDT</li>
<li id="preventivi">Preventivi</li>
<li id="ndc">NDC</li>
<li id="listini">Listini</li>
<li class="ck_login ck_causale ck_mezzo ck_iva ck_imb ck_art ck_spagg ck_pagam dropdown">
Controllo <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="ck_login">Login</li>
<li id="ck_causale">Causale</li>
<li id="ck_mezzo">Mezzo Trasporto</li>
<li id="ck_iva">IVA</li>
<li id="ck_imb">Imballo</li>
<li id="ck_art">Articoli</li>
<li id="ck_spagg">Spese Aggiuntive</li>
<li id="ck_pagam">Pagamento</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');
}
}
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.
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: Fatture
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!
Related
How to create a custom odoo walker for the website navbar
Similar to what Wordpress allows to create a html template which them odoo uses to add the menus so I can design the navigation
<nav>
<div class="logo"></div>
<ul>
<!-- odoo menu items--->
<!-- formatting--->
<!-- <li class="nav-item"> $name </li>--->
</ul>
<div>
<ul>
<li>$name</li>
<li> $name</li>
</ul>
</div>
</nav>
Is there a similar function in odoo
if not how to get all the active menus in odoo in JS
example of a Wordpress walker
this is a work around, you can find the code in addons/portal/views/portal_templates.xml.
<div class="collapse navbar-collapse" id="top_menu_collapse">
<!-- FIXME We want menu to open to the right by default (except cases handled in JS) -->
<ul class="nav navbar-nav ml-auto text-right" id="top_menu">
<li class="nav-item divider" t-ignore="true" t-if="not user_id._is_public()"/>
<li class="nav-item dropdown" t-ignore="true" t-if="not user_id._is_public()">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<b>
<span t-esc="user_id.name[:23] + '...' if user_id.name and len(user_id.name) > 25 else user_id.name"/>
</b>
</a>
<div class="dropdown-menu js_usermenu" role="menu">
<a id="o_logout" class="dropdown-item" t-attf-href="/web/session/logout?redirect=/" role="menuitem">Logout</a>
</div>
</li>
</ul>
</div>
the method _is_public() return True if the "user" is not logged else false
I have a web page with a menu made with the bootstrap framework. This menu in its mobile version appears when you click on the toggle button that appears in the upper right corner. This menu slides from the top down and looks like this:
The code of this header menu is this:
<!--========== HEADER ==========-->
<header class="header navbar-fixed-top">
<!-- Navbar -->
<nav class="navbar">
<div class="container" id="main_header_container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<!-- Logo -->
<div class="logo">
<a class="logo-wrap" href="https://pixels.com/index">
<img class="logo-img logo-img-main" src="img/logo2.png" alt="Logo">
<img class="logo-img logo-img-active" src="img/logo2.png" alt="Logo">
</a>
</div>
<!-- End Logo -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-collapse">
<div class="menu-container">
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/index">HOME</a></li>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_leistungen" href="#">LEIST</a><a id="arrow_to_dropdown-mob" onclick="myFunction()" class="nav-item-child dropbtn">LEIST</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li><a class="dropdown-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="dropdown-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="dropdown-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</ul>
</li>
<div id="myDropdown" class="dropdown-content">
<li><a class="drop-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="drop-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="drop-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</div>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_lasungen" href="#">LOSING</a>
<a id="arrow_to_dropdown-mob" onclick="myFunctiondrop()" class="nav-item-child dropbtn">LOSING</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li class="dropdown-item"><a class="drop-item" href="https://nivamedia.ch/kurier-lieferdienst">PixelsMarket</a></li>
</ul>
</li>
<div id="myDropdown1" class="dropdown-content1">
<li class="drop-item"><a class="drop-item" href="https://pixels.com/kurier">PixelsMarket</a></li>
</div>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/referns">REFERNS</a></li>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/contact">CONTACT</a></li>
</ul>
</div>
</div>
<!-- End Navbar Collapse -->
</div>
</nav>
<!-- Navbar -->
</header>
<!--========== END HEADER ==========-->
What I would like to do is that the header menu slide from left to right, something like this:
How Can I do that with css?
change this class : navbar-nav-right to navbar-nav-left
<ul class="navbar-nav navbar-nav-left">
<li class="nav-item"><a class="nav-item-child nav-item-
hover" href="https://pixels.com/index">HOME</a></li>
i have a Bootstrap-Navbar on a ASP-Page. The Navbar ist included in a MasterPage and working fine with all the sites in root-Directory.
Some Pages with Login-Functionality are in an admin-Folder. These Pages use the same MasterPage, but when beeing on such a page, the Navbar isn't collapsing when clicking on a MainMenu-Item. The only thing that happens, is in the adress-box in the browser is a "#" appearing at the end.
Can someone help me solving this Problem ?
Greetings
Gregor
<nav class="navbar navbar-fixed-top" role="navigation" style="background-color:#286090;width:100%;z-index:10;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i></li>
<li>
Serien
<ul class="dropdown-menu multi-level">
<li>Serien-Diary</li>
<li>Nicht-Beendete</li>
<li>Warteliste</li>
<li>Serien-Sichtung anlegen</li>
<li>Serien-Logo hochladen</li>
<li>DB Chronologie</li>
<li>Sichtungs-Chrono</li>
<li>Serien-Daten</li>
<li>Empfehlungen</li>
</ul>
</li>
<li>
Filme
<ul class="dropdown-menu multi-level">
<li>Film-Diary</li>
<li>in DB anlegen</li>
<li>DB Chronologie</li>
<li>Film-Sichtung anlegen</li>
<li>Empfehlungen</li>
<li>Liste Filtern</li>
<li>DVD's</li>
<li>BluRay's</li>
<li>
FILTERN<b class="caret"></b>
<ul class="dropdown-menu">
<li>
FSK
<ul class="dropdown-menu">
<li>Beschlagnahmen</li>
<li>SPIO/JK</li>
<li>Liste A</li>
<li>Liste B</li>
</ul>
</li>
<li>
Genre
<ul class="dropdown-menu">
<li>Splatter</li>
<li>Horror</li>
<li>Action</li>
<li>Science-Fiction</li>
<li>Fantasy</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
Sonstiges
<ul class="dropdown-menu multi-level">
<li>Einstellungen</li>
<li>Protokoll</li>
<li>HOME</li>
</ul>
</li>
<li><i class="fa fa-hand-o-up"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
My drop down menu nested inside of my main drop down menu won't display all of my information. I played around with it inside JSFiddle and still can't get it to work. If I click the user glyphicon to expand the options, it will get cut off at the bottom of the main menu size.
http://jsfiddle.net/2hGuv/
Here's the HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ns-navbar-collapse">
<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="ns-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="hidden-sm">Events</li>
<li class="hidden-sm">Contest</li>
<li>Magazine</li>
<li>Contact</li>
<li class="dropdown">
Follow <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=zta6bgfab&p=oi&m=1105083662969" target="_blank">
Join Our Mailing List
</a>
</li>
<li class="navbar-follow">
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_twitter_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="searles-media-inc." addthis:usertype="company"></a>
<a class="addthis_button_google_follow" addthis:userid="+Nextstopmagazine"></a>
</div>
</li>
</ul>
</li>
<li class="dropdown visible-sm">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Events</li>
<li>Contest</li>
<li>Search</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Dashboard</li>
<li><a class="dropdown-toggle" href="~/account/manage">Manage Account</a></li>
<li>Log off </li>
</ul>
</li>
<li class="hidden-sm"><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>
Sounds like you have overflow: hidden; on your navbar.
The fiddle seems to be working.
I have tried to allign my dropdown to the right part of navbar but failed, I have tried a lot of way to do it, in all ways I have failed.
If there is any way to fix this someone help me please, thanks in advance.
<?php
$curdir = getcwd ();
chdir('/forum');
require_once('/global.php');
chdir ($curdir);
$username=$vbulletin->userinfo['username'];
?>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/index.php"></p>Name</p></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
Home</b>
</li>
<li>
Forum
</li>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown'><img src="P.png"> Players<b class='caret'></b>
</a>
<ul class="dropdown-menu">
<li>
<img src="/action.php"> Action
</li>
</ul>
</li>
<?php if ($vbulletin->userinfo['usergroupid'] == '1' )
echo "
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown'><i class='icon-user icon-white'></i> Welcome Guest<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
<a href='#'><img src='/img/connectserver.png'> Action</a>
</li>
<li>
<a href='/login.php'><i class='icon-ban-circle'></i> Login</a>
</li>
<li>
<a href='register.php'><i class='icon-ok'></i> Register</a>
</li>
</li>
</ul>
</ul>
</li>";?>
<?if ($vbulletin->userinfo['usergroupid'] != '1' )
echo "
</li>
<li class='dropdown'>
<a href='#' class='dropdown-toggle class='nav pull-right' data-toggle='dropdown'><img src='/img/connectserver.png'></i> Welcome <font color='red'>$username</font><b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
<a href='#'><img src='/img/connect.png' height='19' width='19'> Connect to server</a>
</li>
<!-- <li>
<a href='#'><img src='/log-out.png' height='19' width='19'> Log out</a>
</li> -->
</li>
</ul>
</li></p>";?>
</ul>
</div>
</div>
</div>
</div>
</div>
The html looks invalid. I cannot see all your code but it seems you have a closing li tag after your closing ul tag inside a p tag? li's can only be inside ul or ol tags. Make sure the html is correct and the try again! Hope this helps!