How to create dropdown menu with nested submenu using jQuery - javascript

i want to create a dropdown menu with nested submenu so that when users over on a submenu it should display its dropdown list and when the mouse is taken out of the submenu it should hide its dropdown list. i have tried but it works only with on click() method but i want to use on hover(). here is my code
html
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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>
<a class="navbar-brand" href="#"><img src="design/img/logo.png" alt="logo"></a>
<h6><small>Some text</small></h6>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="main-navigation">
<li class="">Accueil</li>
<li class="dropdown">
Groupe Cible <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1" href="#">Cible Etudes & Conseils <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="-1">Qui Sommes Nous <i class="fa fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li>Cible Etudes/Conseil</li>
<li>Notre Vision</li>
<li>Notre Mission</li>
<li>Nos Valeurs</li>
<li>Notre Force</li>
<li>Nos Filiales</li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" href="#" data-toggle="dropdown">Notre Offre </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Enquêtes et Sondage</a>
<ul class="dropdown-menu">
<li><a tabindex="0">procédures Qualité</a></li>
<li>Méthodes</li>
<li><a tabindex="0">outils de Collecte</a></li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" tabindex="0" data-toggle="dropdown">Les Etudes</a>
<ul class="dropdown-menu">
<li class="test" class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Marketing</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Marché</a></li>
<li><a tabindex="0">Consommateurs</a></li>
<li><a tabindex="0">Stratégie Marketing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" class="test" href="<?=url::site('fr/a_propos/14/development')?>" tabindex="0" data-toggle="dropdown">Développement</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Impact environnemental</a></li>
<li><a tabindex="0">Développement Urbain et Local</a></li>
<li><a tabindex="0">Assainissement</a></li>
<li><a tabindex="0">Evaluation des projets et programmes</a></li>
</ul>
</li>
<li><a tabindex="0">Moyens Logistiques</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">Le Conseil</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Conseil en Marketing</a></li>
<li><a tabindex="0">Conseil en Gestion</a></li>
<li><a tabindex="0">Recherche de Financement</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="0" data-toggle="dropdown">La Formation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Formation en Vente</a></li>
<li><a tabindex="0">Formation en Marketing</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu" >
<li>Cameroun</li>
<li>Afrique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
<!-- =========================== cible RH ============================== -->
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Cible RH Emploi</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Qui Sommes Nous </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Présentation </a>
<ul class="dropdown-menu">
<li><a tabindex="0">Cible RH Emploi</a></li>
<li><a tabindex="0">Notre Vision</a></li>
<li><a tabindex="0">Notre Mission</a></li>
<li><a tabindex="0">Nos Valeurs</a></li>
<li><a tabindex="0">Notre Force</a></li>
<li><a tabindex="0">Nos Filiales</a></li>
</ul>
</li>
<li>Notre Equipe</li>
<li>Nous Ecrire</li>
<li>Retrouvez Nous </li>
</ul>
</li>
<li >Notre Offre </li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Nous Ont Fait Confiance </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Afique</li>
<li>L'international</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#" tabindex="0" data-toggle="dropdown">Où Intervenons Nous </a>
<ul class="dropdown-menu">
<li>Cameroun</li>
<li>Gabon</li>
<li>Tchad</li>
<li>Congo Brazzaville</li>
<li>Côte d’Ivoire</li>
<li>Burkina Faso</li>
<li>Mauritanie</li>
<li>Mali</li>
<li>Bénin</li>
<li>Guinée Conakry</li>
<li>Niger</li>
<li>Togo</li>
<li>Djibouti</li>
<li>Rwanda</li>
<li>Burundi</li>
</ul>
</li>
<li class="dropdown-submenu" id="men">
<a class="test" href="" tabindex="0" data-toggle="dropdown">Nos Publications </a>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Résultats</li>
<li>New</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown <?=(!empty($service))?"active":""?>">
Services <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Web Design</li>
<li>SEO</li>
</ul>
</li>
<li class="dropdown <?=(!empty($client))?"active":""?>">
Clients <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>MTN</li>
<li>Apple</li>
</ul>
</li>
<li class="dropdown <?=(!empty($equipe))?"active":""?>">
Team <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Mark</li>
<li>John</li>
</ul>
</li>
<li class="dropdown <?=(!empty($partenaire))?"active":""?>">
Partners <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Bootstrap</li>
<li>Ubuntu</li>
</ul>
</li>
<li class="dropdown <?=(!empty($actualite))?"active":""?>">
News <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Perl</li>
<li>Python</li>
</ul>
</li>
<li class="dropdown <?=(!empty($project))?"active":""?>">
Projects <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Java</li>
<li>Ajax</li>
</ul>
</li>
<li class="dropdown <?=(!empty($contact))?"active":""?>">
Contacts <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li>Contact Cible Etudes/Conseils</li>
<li>Contact Cible RH</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
then my jquery
$('a.test + ul').css("display","none");
$('.dropdown-submenu').css("position","relative");
$('.dropdown-submenu .dropdown-menu').css({"top": "0","left": "100%","margin-top": "-1px"});
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// Re-add .open to parent sub-menu item
$(this).parent().addClass('open');
$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});
please help me! Thanks.


You can do this by simply using CSS like follows-
.dropdown-submenu:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}
Working fiddle here

Related

Text flows over navbar

It works on my old navbar (but it's boostrap 3 and this project is on 5). The text overflows my navbar and causes the text/website to get extra space then what it's supposed to be showing. I need a genius to resolve this for me as i have been stumped on this for a long time.
Issue (images)
https://gyazo.com/c212a931d6770b77998cb3fea3ae87d1 i'm highlighting it as the text can't be seen due to white backround.
Trying to get working (old navbar) https://gyazo.com/66c482022e325cd9bd335ff666377474
Here is a JSfiddle to give an example plus the code i'm using. https://jsfiddle.net/yf90uxhc/2/
code:
document.addEventListener("DOMContentLoaded", function() {
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function() {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function(everysubmenu) {
// hide every submenu as well
everysubmenu.style.display = 'none';
});
})
});
document.querySelectorAll('.dropdown-menu a').forEach(function(element) {
element.addEventListener('click', function(e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
})
}
// end if innerWidth
});
// DOMContentLoaded
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Amarr Empire
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Caldari State
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Minmatar Republic
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Gallente Federation
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Guristas Pirates
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Angel Cartel
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Blood Raider Covenant
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
ORE
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Servant Sisters of Eve
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Mordu's Legion Command
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Sansha's Nation
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Serpentis
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Triglavian Collective
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
EDENCOM
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Frigate Class</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#">Frigate</a>
<ul class="submenu dropdown-menu">
<li>
<a class="dropdown-item" href="#"> </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- -->
</ul>
</div>
</div>
</nav>

You're looking to enable flexbox wrapping on the menu <ul>.
Change
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
To
<ul class="navbar-nav flex-wrap me-auto mb-2 mb-lg-0">

add an active class to one of my elements and select only the relevant parent

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>

How to hide navbar collapse when we click on outside?

I am facing the issue in when i click on the icon bar the drop down menu opens and then when i click on the another menu (Alumini menu ) ,the iconbar's drop down menu is not closed but both the alumini menu and the icon bars dropdown menu is viewed.I don't know why the iconbar's drop down menu is not closed while clicking the alumini menu.
The html code for design is uploaded below.
<div class="join">
<!-- Nav Starts -->
<nav class="navbar navbar-default container-fluid wrap">
<div class="container pos-relative">
<div class="navbar-header">
<ul class="new pull-left">
<li class="old"> <img class="img-responsive" src="<?php bloginfo( 'template_url' ); ?>/images/skv-logo-100px.png"></img> </li>
<li> <a class="navbar-brand create hidden-xs" href="http://localhost/wordpress">SKV Vidhyaashram</a> </li>
</ul>
<ul class="nav navbar-nav navbar-main pull-left hidden-xs">
<li>News & Events</li>
<li>Toppers</li>
<li>Achievements</li>
<li>ISA Activities</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Alumni</a>
<ul class="dropdown-menu alumni-menu">
<li>Alumni Home</li>
<li>Committee Members</li>
<li>Gallery</li>
<!-- <li>Events</li> -->
</ul>
</li>
<li><a class="user-icon" href="http://dev.seyali.com/alumni_demo/public/login" data-toggle="tooltip" data-placement="right" title="Login"> <span class="glyphicon glyphicon-user"></span></a></li>
</ul>
<button type="button" class="quicklinkbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#quicklinkbar" aria-expanded="false" aria-controls="quicklinkbar">
<span class="sr-only">Toggle navigation</span>
</button>
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> About Us<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Chairman's Notes</li>
<li>Mission & Vision</li>
<li>Principal's Notes</li>
</ul>
</li>
<li class="dropdown list">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Academics<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>CBSE Circular</li>
<li>Academic Objectives</li>
<li>CBSE & Afflitation</li>
<li>Grades Prekg to X</li>
<li>Innovative Teaching Methods</li>
<li>Labs & Library</li>
<li>Prekg,Juniorkg & Seniorkg</li>
<li>School Terms & Curriculum</li>
</ul>
</li>
<li class="dropdown list1">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Beyond-Academics<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Co-curricular</li>
<li>Extra-curricular</li>
<li>Life at SKV</li>
</ul>
</li>
<li class="dropdown list2">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Sports & Games<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Sports Activities</li>
<li>Sports Facilities</li>
</ul>
</li>
<li class="dropdown list3">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Admission Fees<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Registration & Admission</li>
<li>Entrance Examination</li>
<li>Fees & Payment</li>
</ul>
</li>
<li class="dropdown list4">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Gallery<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Image Gallery 2014-2015</li>
<li>Image Gallery 2016-2017</li>
<li>Video Gallery</li>
</ul>
</li>
<li class="dropdown list5">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Careers<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Working at SKV</li>
<li>Positions Vacant</li>
<li>General Information</li>
<li>Apply Online</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
<div id="quicklinkbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>News & Events</a></li>
<li><a>Toppers</a></li>
<li><a>Achievements</a></li>
<li><a>ISA Activities</a></li>
<li><a>Alumni</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!-- Nav Ends -->
And the image is attached below
In above attached the two menus are apperaing , in that when i click on the icon bar drop down menu o[pens and again when i click on the alumini menu alumini menu opens but iconbars drop down menu is not closed.Please help me how to solve this.

how to pushup the content when clicks on dropdown list item in bootstarp

Hi,My question is how to drag the content when clicks on any option in
dropdown,colud you please tel me...
it is leftside menu-bar,when clicks on any dropdown item it is covering the below menu-bar list,so i need to drag the other menu bar
list when clicks on any dropdown list..
<ul class="sidebar-menu">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="active dropdown">
<a href="general.html" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-gavel"></i> <span>General <span class="caret"></span></span>
</a>
<ul class="dropdown-menu">
<li><a href="#General1" class="btn btn-success" data-toggle="tab" >General1</a></li>
<li><a href="#General2" class="btn btn-success" data-toggle="tab" >General2</a></li>
<li>General3</li>
</ul>
</li>
<li>
<a href="basic_form.html">
<i class="fa fa-globe"></i> <span>Basic Elements</span>
</a>
</li>
<li>
<a href="simple.html">
<i class="fa fa-glass"></i> <span>Simple tables</span>
</a>
</li>
</ul>

how to add active class <li> element when clicked

My menu is :
<div class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="active">
<a href="default.asp" id="home">
ANA SAYFA
</a>
</li>
<li class=" dropdown">
<a href="/kurumsal/" class="dropdown-toggle"
data-toggle="dropdown">
KURUMSAL
<b class="caret"></b>
</a>
<ul class="dropdown-menu" aria-labelledby="drop2" role="menu">
<li>Hakkımızda</li>
<li>Kadromuz</li>
<li>Hizmet Anlayışımız</li>
<li>İşletme Fotoğrafları</li>
<li>Referanslar</li>
<li>Fuar Fotoğrafları</li>
<li>Sözleşme Fotoğrafları</li>
</ul>
</li>
<li class=" dropdown">
<a href="/urunler/" class="dropdown-toggle"
data-toggle="dropdown">
ÜRÜNLER
<b class="caret"></b>
</a>
<ul class="dropdown-menu" aria-labelledby="drop2" role="menu">
<%
set urn=server.createobject("adodb.recordset")
urn.open "kategori order by sira asc",cms,1,3
%>
<% do while not urn.eof %>
<li><%=urn("kategori")%></li>
<%
urn.movenext
loop
%>
<%
urn.close
set urn = Nothing
%>
</ul>
</li>
<li class="">
<a href="basinda-schtec.asp" id="press" >
BASINDA SCHTEC
</a>
</li>
<li class="">
<a href="satis-sonrasi.asp" id="sell" >
SATIŞ SONRASI
</a>
</li>
<li class="">
<a href="iletisim.asp" id="contact" >
İLETİŞİM
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">TR</li>
<li>EN</li>
<li>RU</li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li><i style="color:#fff;font-size:18px" class="fa fa-facebook-square"></i></li>
</ul>
<!--<form class="navbar-form navbar-right" role="search" action="/search/" method="get">-->
<!--<div class="form-group">-->
<!--<input name="q" type="text" class="form-control input-sm" placeholder="Arama">-->
<!--</div>-->
<!--<button type="submit" class="btn btn-sm"><i class="glyphicon glyphicon-search"></i></button>-->
<!--</form>-->
</div>
And I want to learn how to add active class "li" element when clicked
for example I clicked İLETİŞİM when I go to iletisim.asp only
<li class="active">
<a href="iletisim.asp" id="contact" >
İLETİŞİM
</a>
</li>
the others class= ""

Categories

Resources