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!
Related
In my menu I would like to add an active class to one of my elements: li.nav-item
and this only if the child item: ul.nav-collapse.li has the active class.
for this I made a script that works but it adds the active class to all elements: li.nav-intem
I would like it to select only the relevant parent: li.nav-item
which contains the active class ul.nav-collapse.li.active
JS
$('ul.nav-collapse li').each(function(){
if($(this).hasClass('active')) {
$(this).parent().parent().parent().parent().find('li.nav-item').addClass("active");
}
});
HTML
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
I would like something like this
<ul>
<li class="nav-item active">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
any idea?
Check if current element has class "active"
Use closest to get parent element with specific class :
https://api.jquery.com/closest/
Then add class to the current element
$('ul.nav-collapse li').each(function() {
// if current item has class active
if ($(this).hasClass("active")) {
// add class to the current clicked element
$(this).closest('.nav-item').addClass("active");
}
});
.nav-item.active { border:1px solid red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu1">
<p>My Folder</p>
</a>
<div class="collapse" id="submenu1">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder">
<span class="sub-item">SubFolder</span>
</a>
</li>
<li class="active">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu2">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu2">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder2">
<span class="sub-item">SubFolder2</span>
</a>
</li>
<li class="">
<a href="SubFolder2_2">
<span class="sub-item">SubFolder2_2</span>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#submenu3">
<p>My Folder2</p>
</a>
<div class="collapse" id="submenu3">
<ul class="nav nav-collapse">
<li class="">
<a href="SubFolder3">
<span class="sub-item">SubFolder3</span>
</a>
</li>
<li class="">
<a href="SubFolder3_2">
<span class="sub-item">SubFolder3_2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
I have a problem in my burger menu. It is not hiding after I click on the menu. I'm a beginner and I don't know where the problem is?
I need your help please. If you need any other information about my code feel free to ask me.
<nav id="navbar" class="navbar default">
<div class="container mob-logo">
<div class="navbar-header col-sm-2 tablet-logo">
<button type="button" class="navbar-toggle mob-menu" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
</button>
<div class="mobile-sidebar">
<span class="sidebar-btn btn fa-bar-hide" data-action="toggle" data-side="right" >
<i class="fa fa-bars"></i>
</span>
</div>
</div>
<div class="collapse navbar-collapse " id="myNavbar" >
<ul class="nav navbar-nav pull-right ">
<li class="active">
<a href="#accueil" data-du-smooth-scroll data-du-scrollspy>Accueil</a>
</li>
<li class="active">
<a href="#home" data-du-smooth-scroll data-du-scrollspy>Groupe</a>
</li>
<li>
<a href="#Competences" data-du-smooth-scroll data-du-scrollspy>Competences</a>
</li>
<li>
<a href="#Services" data-du-smooth-scroll data-du-scrollspy>Services</a>
</li>
<li>
<a href="#References" data-du-smooth-scroll data-du-scrollspy>References</a>
</li>
<li>
<a href="#contact" data-du-smooth-scroll data-du-scrollspy>Contact</a>
</li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
$(".mob-menu").click(function(){
$(this).hide();
});
});
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!
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 am bound by a menu embed in a CMS (dont have source code), so this is what the menu looks like
<li class="dir dgn-root Item-2">
<span>Menu1</span><div class="mega_submenu Column2 Column3" style="display: none;">
<ul class="mega_submenu_ul">
<li>
<ul>
<li class=" first-item SunItem-1">
<a href="#" title="Templates">
<span>Templates</span>
</a>
</li>
<li class=" SunItem-2">
<a href="#" title="Questions and Answers">
<span>Questions and Answers</span>
</a>
</li>
<li class=" SunItem-3">
<a href="#" title="Template Package">
<span>Template Package</span>
</a>
</li>
<li class=" SunItem-4">
<a href="#" title="Silver Package">
<span>Silver Package</span>
</a>
</li>
</ul>
</li>
<li>
<ul>
<li class=" SunItem-5">
<a href="#" title="Gold Package">
<span>Gold Package</span>
</a>
</li>
<li class=" SunItem-6">
<a href="#" title="Platinum Package">
<span>Platinum Package</span>
</a>
</li>
<li class=" SunItem-7">
<a href="#" title="Features">
<span>Features</span>
</a>
</li>
<li class=" last-item SunItem-8">
<a href="#" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
What I need to try and do is
This is what it looks like now:
<li class=" last-item SunItem-8"><a href="#><span>Blah</span></a></li>
But I need to have Jquery or javascript insert a few HTML elements before this, so it looks like:
</li></ul><li><ul>
so it will look like this:
</li></ul><li><ul><li class=" last-item SunItem-8"><a href="#><span>Blah</span></a></li>
Any help is appreciated, I have tried
$(document).ready(function(){
$("img").before("<ul><li><b>Before</b></li></ul>");
});
But this does not seem to work, I have also tried this
<script>
(function() {
var lastItem = $("li.SunItem-8");
var currentList = lastItem.closest('ul');
var newList = $("</ul></li><li><ul>");
newList.insertAfter(currentList);
newList.append(lastItem);
})();
</script>
This seem to duplicate the text and does not actually form the HTML tags as expected - the html output looks like this once inserting the above script.
<li>
<ul>
<li class=" SunItem-5">
<a href="http://gentex/website-packages/gold-package.aspx" title="Gold Package">
<span>Gold Package</span>
</a>
</li>
<li class=" SunItem-6">
<a href="http://gentex/website-packages/platinum-package.aspx" title="Platinum Package">
<span>Platinum Package</span>
</a>
</li>
<li class=" SunItem-7">
<a href="http://gentex/website-packages/cms-features.aspx" title="CMS Features">
<span>CMS Features</span>
</a>
</li>
</ul>
<li>
<ul>
</ul>
<li class=" last-item SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
<li class=" SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
<li class=" last-item SunItem-8">
<a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio">
<span>Portfolio</span>
</a>
</li>
</li>
</li>
You are not working with html, you can not just insert tags. You will need to remove() the element and append a the new list with that element.
var lastItem = $("li.SunItem-8");
var parent = lastItem.parent();
lastItem.remove();
var newUL = $("<ul>").append(lastItem);
parent.after(newUL);