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">
Related
I have a sidebar implemented using bootstrap collapsible,
The menus are all in tagged my issue is when i clicked on this tagged,
the page refreshed thus re-animating the collapsible panel and it doesnt look good
I have already stored the stage of this collapsible items in a cookie to know the previous state before reloading but now its the reanimation of it collapsing is what is happening.
How to solve this?
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Create</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Featured List</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Automated List</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Option 4</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Option 5</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Option 6</a></li>
</ul>
</div>
</li>
Your question is not easy to understand, so please rephrase it if this is not the answer you were looking for.
Looking at your code though, you are duplicating IDs and both .nav-linkss have the same data-bs-target target. So that won't work.
Make each toggle target and collapse ID unique:
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Create</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Featured List</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Automated List</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic-2" aria-expanded="true" aria-controls="ui-basic-2">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic-2">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Option 4</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Option 5</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Option 6</a></li>
</ul>
</div>
</li>
This question already has answers here:
Navbar dropdown (collapse) is not working in Bootstrap 5
(11 answers)
Closed last year.
When I copy the code of the navbar dropdown from the documentation of bootstrap 5 the dropdown doesn't work, if I click on the dropdown the links ("action", "another action", "something else") of this last one don't show up, what should I do?
here is the code :
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<br>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
<h1>Navbar</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</ul>
</div>
</div>
</nav>
Change this:
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a>
To this:
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown Link</a>
Also add this:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown Link</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<br>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
<h1>Navbar</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Not only do you need the CSS CDN. But you also need the JavaScript CDN's for the dropdown-menu to work.
You can find all documentation and Scripts for Bootstrap 5 Navbars and Bootstrap Dropdowns in the links provided.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<h1>Navbar</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
HTML :
<div class="navbar navbar-expand-md navbar-dark bg-dark mb-4" role="navigation" width="100%">
<a class="navbar-brand" href="/dgda">DGDA|HOME</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/dgda">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.dgda.gov.bd/index.php/downloads/background">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pharmacies</a>
<ul class="dropdown-menu" aria-labelledby="dropdown1">
<li class="dropdown-item" ><a id="linkDesign" href="/dgda/pharmacies/requests">New Pharmacy Requests</a></li>
<li class="dropdown-item dropdown">
<a class="dropdown-toggle" id="dropdown1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">See Pharmacy List</a>
<ul class="dropdown-menu" aria-labelledby="dropdown1-1">
<li class="dropdown-item" ><a id="linkDesign" href="/dgda/pharmacies/allopathicRetailPharmacyView">Allopathic Retail Pharmacy</a></li>
<li class="dropdown-item" ><a id="linkDesign" href="/dgda/pharmacies/ayurvedic-retail-pharmacy-view">Ayurvedic Retail Pharmacy</a></li>
<li class="dropdown-item" ><a id="linkDesign" href="/dgda/pharmacies/unani-retail-pharmacy-view">Unani Retail Pharmacy</a></li>
<li class="dropdown-item" ><a id="linkDesign" href="/dgda/pharmacies/herbal-retail-pharmacy-view">Herbal Retail Pharmacy</a></li>
<li class="dropdown-item" ><a id="linkDesign" href="/dgda/pharmacies/homeopathic-and-biochemic-retail-pharmacy-view">Homeopathic and Biochemic Retail Pharmacy</a></li>
<li class="dropdown-item" ><a id="linkDesign" href="https://www.dgda.gov.bd/index.php/pharmacies/whole-sale-pharmacy-view-2">Model Pharmacy</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2</a>
<ul class="dropdown-menu" aria-labelledby="dropdown2">
<li class="dropdown-item" href="#"><a>Action 2 A</a></li>
<li class="dropdown-item" href="#"><a>Action 2 B</a></li>
<li class="dropdown-item" href="#"><a>Action 2 C</a></li>
<li class="dropdown-item dropdown">
<a class="dropdown-toggle" id="dropdown2-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1</a>
<ul class="dropdown-menu" aria-labelledby="dropdown2-1">
<li class="dropdown-item" href="#"><a>Action 2.1 A</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1 B</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1 C</a></li>
<li class="dropdown-item dropdown">
<a class="dropdown-toggle" id="dropdown2-1-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1.1</a>
<ul class="dropdown-menu" aria-labelledby="dropdown2-1-1">
<li class="dropdown-item" href="#"><a>Action 2.1.1 A</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1.1 B</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1.1 C</a></li>
</ul>
</li>
<li class="dropdown-item dropdown">
<a class="dropdown-toggle" id="dropdown2-1-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2.1.2</a>
<ul class="dropdown-menu" aria-labelledby="dropdown2-1-2">
<li class="dropdown-item" href="#"><a>Action 2.1.2 A</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1.2 B</a></li>
<li class="dropdown-item" href="#"><a>Action 2.1.2 C</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
JavaScript:
$(document).ready(function () {
$('.navbar .dropdown-item').on('click', function (e) {
var $el = $(this).children('.dropdown-toggle');
var $parent = $el.offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('navbar-nav')) {
if ($parent.hasClass('show')) {
$parent.removeClass('show');
$el.next().removeClass('show');
$el.next().css({"top": -999, "left": -999});
} else {
$parent.parent().find('.show').removeClass('show');
$parent.addClass('show');
$el.next().addClass('show');
$el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
}
e.preventDefault();
e.stopPropagation();
}
});
$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
$(this).find('li.dropdown').removeClass('show open');
$(this).find('ul.dropdown-menu').removeClass('show open');
});
});
I'm attempting to build a nested dropdown menu. While I have managed to get it to open the next level, my implementation fails to close on click event.
https://jsfiddle.net/qw8fmhap/63/
javascript
const nodeList = document.querySelectorAll('.dropdown-menu a.dropdown-toggle');
nodeList.forEach((elem) => {
elem.addEventListener('click', (e) => {
e.stopPropagation();
let parent = elem.offsetParent;
if (!elem.nextElementSibling.classList.contains('show')) {
parent.classList.remove('show');
}
let subMenu = elem.nextElementSibling;
console.log(subMenu);
subMenu.classList.toggle('show');
elem.parentElement.classList.toggle('show');
console.log(elem.parentElement);
});
});
If you aren't planning to have multiple dropdown menus doing vastly different things, removing .dropdown-menu should fix the initial menu button.
As for the submenus closing on a parent close, you will need to iterate through those menus and close each one. Refer to the menusToClose.forEach logic here:
const nodeList = document.querySelectorAll('a.dropdown-toggle');
nodeList.forEach((elem) => {
elem.addEventListener('click', (e) => {
e.stopPropagation();
let subMenu = elem.nextElementSibling;
console.log(subMenu);
subMenu.classList.toggle('show');
if (!subMenu.classList.contains('show')) {
let menusToClose = subMenu.querySelectorAll('ul.dropdown-menu');
menusToClose.forEach((menuToClose) => {
menuToClose.classList.remove('show');
});
}
});
});
/*//Copy this css*/
.navbar-light .navbar-nav .nav-link {
color: rgb(64, 64, 64);
}
.btco-menu li>a {
padding: 10px 15px;
color: #000;
}
.btco-menu .active a:focus,
.btco-menu li a:focus,
.navbar>.show>a:focus {
background: transparent;
outline: 0;
}
.dropdown-menu .show>.dropdown-toggle::after {
transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Static navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action</a></li>
<li><a class="dropdown-item" href="#">Another submenu action</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action aa</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action bb</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu action 2</a></li>
<li><a class="dropdown-item" href="#">Another submenu action 2</a></li>
<li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action 1 3</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action 2 3</a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu 3</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action 3 </a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
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