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>
Related
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">
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');
});
});
The following example I want the slideup, slidedown animation for inner sub-menu also. Now animation working for first level dropdown only.
Script I have tried below.
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
}
var $subMenu = $(this).next('.dropdown-menu').stop(true, true).slideDown();
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').stop(true, true).slideUp().removeClass('show');
});
return false;
});
Comment for further assistance. Thanks.
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
}
var $subMenu = $(this).next('.dropdown-menu');
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass('show');
});
return false;
});
// Add slideUp animation to Bootstrap dropdown when collapsing.
$('.dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
$('.dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg 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 dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" 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 class="dropdown-submenu">
<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 class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
I am trying to convert the following navbar direction and behavior of submenus to the other direction..
This is the original code, and below it is the edited one that needs more tweaking to be "right to left":
The original:
// dropdown menu on hover
var $screensize = $(window).width();
$('.dropdown').on("mouseover", function() {
$(this).find('> .dropdown-menu').stop(true, true).slideDown('fast');
$(this).bind('mouseleave', function() {
$(this).find('> .dropdown-menu').stop(true, true).css('display', 'none');
});
});
//Change position for drop down
$(function() {
$(".dropdown li").on('mouseenter mouseleave', function(e) {
if ($('.dropdown-menu', this).length) {
var elm = $('.dropdown-menu', this);
var off = elm.offset();
var l = off.left;
var w = elm.width();
var docW = $(window).width();
var isEntirelyVisible = (l + w <= docW);
if (!isEntirelyVisible) {
$(elm).addClass('dropdown-reverse');
} else {
$(elm).removeClass('dropdown-reverse');
}
}
});
});
.dropdown-menu {
margin-top: -2px;
}
li.dropdown .dropdown-menu .dropdown-menu {
left: 100%;
margin-top: -30px;
}
.dropdown-reverse {
left: auto!important;
right: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<nav id="menu" class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a><ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a><ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</nav>
I edited the above and added .navbar{float: right; } in the css, text-align:right for li dropdown and also dir="rtl" in the top line of nav in the html. But still the behavior is not as intended, as the rtl css addition made it lose the respect for the screen size as this image (this is the original):
But now it only opens one first two right, but the third submenu gets opened over the first one.
Here is a fiddle for the test: https://jsfiddle.net/2b8h30Lx/41/
I have a bootstrap dropdown but i am not able to set the selected menu item as default selected dropdown item?
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="drpDownCat"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select a Category<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="drpDownCat">
<li><a class="dropdown-item" href="#">Category 1</a></li>
<li><a class="dropdown-item" href="#">Category 2</a></li>
<li><a class="dropdown-item" href="#">Category 3</a></li>
<li><a class="dropdown-item" href="#">Category 4</a></li>
</ul>
</div>
<script>
$('.dropdown-toggle').click(function()
{
$('.dropdown-menu').toggle();
});
</script>
I have created a JSFiddle for the above code.
Try this
$(function() {
$(".dropdown-menu li a").click(function() {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="drpDownCat" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select a Category<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="drpDownCat">
<li><a class="dropdown-item" href="#">Category 1</a>
</li>
<li><a class="dropdown-item" href="#">Category 2</a>
</li>
<li><a class="dropdown-item" href="#">Category 3</a>
</li>
<li><a class="dropdown-item" href="#">Category 4</a>
</li>
</ul>
</div>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="drpDownCat"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select a Category<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="drpDownCat">
<li><a class="dropdown-item" href="#">Category 1</a></li>
<li><a class="dropdown-item" href="#">Category 2</a></li>
<li><a class="dropdown-item" href="#">Category 3</a></li>
<li><a class="dropdown-item" href="#">Category 4</a></li>
</ul>
</div>
<script type="text/javascript">
$('.dropdown-item').click(function(){
$("#drpDownCat").text(this.text)
});
</script>
</body>
</html>