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>
Related
I have asp.net core MVC using bootbox.
I noticed that my dropdown-menu is not working, I tried everything like removing the js files and CSS files and re add them again but with no luck until I removed bootbox.js and bom! and the dropdown menu works fine.
here is my _Layout.cshtml:
<!DOCTYPE html>
<html lang="ar-sa" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - POS3</title>
<script src="~/js/bootbox.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
#*<script src="~/js/popper.min.js"></script>*#
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">POS<sup>3</sup></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<partial name="_LoginPartial" />
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="SelectedItems" asp-action="POSMain">POSMain</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">Products</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<il class="dropdown-item">
<a class="dropdown-item" asp-area="" asp-controller="Product" asp-action="Create">Add New Product</a>
</il>
</ul>
</li>
<li class="nav-item dropdown">
<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>
</ul>
</li>
</ul>
</li>
</ul>
<form class="form-inline my-2 my-lg-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>
</nav>
</header>
<div class="container" >
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - POS3 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery-3.3.1.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/jquery.dataTables.min.js"></script>
<script src="~/js/DataTables/jquery.dataTables.min.js" defer></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
#RenderSection("Menu", required: false)
#RenderSection("ProductScript", false)
</body>
</html>
I think there is something in bootbox.js that is just stopping the dropdown to work as usual.
Assuming everything else in your project is built correctly, your layout has a bunch of issues that need to be fixed:
You've included jQuery quite a few times. Remove all but one.
You've loaded two different versions of bootstrap.js, and out of order.
You added bootbox.js as the first script, in the <head>. As we note
in our docs,
Bootbox needs to be loaded AFTER Bootstrap (since it's a Bootstrap extension).
So, removing the redundancies and fixing the script order, here's what you're left with (I spaced the scripts out at the end, so that you can see what's loaded):
<!DOCTYPE html>
<html lang="ar-sa" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - POS3</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">POS<sup>3</sup></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<partial name="_LoginPartial" />
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="SelectedItems" asp-action="POSMain">POSMain</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">Products</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<il class="dropdown-item">
<a class="dropdown-item" asp-area="" asp-controller="Product" asp-action="Create">Add New Product</a>
</il>
</ul>
</li>
<li class="nav-item dropdown">
<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>
</ul>
</li>
</ul>
</li>
</ul>
<form class="form-inline my-2 my-lg-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>
</nav>
</header>
<div class="container" >
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2019 - POS3 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery-3.3.1.js"></script>
<script src="~/js/jquery.dataTables.min.js"></script>
<script src="~/js/DataTables/jquery.dataTables.min.js" defer></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/bootbox.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
#RenderSection("Menu", required: false)
#RenderSection("ProductScript", false)
</body>
</html>
I'm new to using Bootstrap and JS isn't my strongest language so I'm struggling to achieve what I'm looking for.
I have a menu for a site being generated with php like so:
<?php
$products_menu = '';
$sql1 = "SELECT * FROM headings";
$stmt1 = DB::run($sql1);
while($row = $stmt1->fetch(PDO::FETCH_ASSOC)){
$heading_id = $row['id'];
$heading = $row['heading'];
$products_menu .= '<li class="dropdown-item d-block">';
$products_menu .= '<a class="submenu-item" href="store#'.$heading_id.'">'.$heading.'</a>';
$products_menu .= '<ul class="dropdown-submenu">';
$params = [$heading_id];
$sql = "SELECT categories.category,categories.url FROM categories INNER JOIN category_headings on categories.id=category_headings.category WHERE category_headings.heading=?";
$stmt = DB::run($sql,$params);
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$category = $row['category'];
$url = $row['url'];
$products_menu .= '<li class="d-block">'.$category.'</li>';
}
$products_menu .= '</ul>';
$products_menu .= '</li>';
}
?>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon">
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item text-center"><a class="nav-link nav" href="">Home</a></li>
<li class="nav-item text-center dropdown">
<a class="nav-link nav dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Products</a>
<ul class="dropdown-menu">
<?php echo $products_menu; ?>
</ul>
</li>
<li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li>
</ul>
</div>
</nav>
I want the first dropdown menu to be positioned outside of the parent header.
Then each item in the first dropdown should also be clickable to bring you to that heading on the store page.
Hovering on the first dropdown menu items should show its submenu to the side.
Edit
I didn't want to post the whole HTML being generated as its huge so I cut out an example of the first few headings and just the first few categories from each one
<div class="page-header header-bottom">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-5 col-sm-5 col-xs-5">
<img src="media/logo.png" alt="Logo" class="logo">
</div>
<div class="col-lg-4 col-md-5 col-sm-5 col-xs-5">
<form class="form-inline search">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-default bg-orange" type="submit">
<img src="media/icons/search.png" alt="search icon" class="icon">
</button>
</div>
</div>
</form>
</div>
<div class="col-lg-4 col-md-2 col-sm-2 col-xs-2">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<img src="media/icons/menu.png" alt="Menu" class="icon">
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item text-center"><a class="nav-link nav" href="">Home</a></li>
<li class="nav-item text-center dropdown">
<a class="nav-link nav dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Products</a>
<ul class="dropdown-menu">
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#1">Lifters & Accessories</a>
<ul class="dropdown-submenu">
<li class="d-block">Hooks - Weld On Hooks</li>
<li class="d-block">Manhole Cover Lifters</li>
<li class="d-block">Salt Spreaders</li>
<li class="d-block">ID Tags</li>
</ul>
</li>
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#2">Lifting & Measurement Attachments</a>
<ul class="dropdown-submenu">
<li class="d-block">Big Bag Lifters</li>
<li class="d-block">Crane Slung Safety Cages</li>
<li class="d-block">Gas Bottle Handlers</li>
<li class="d-block">Weighers - Crane Weighers</li>
</ul>
</li>
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#3">Forklift & Crane Attachments</a>
<ul class="dropdown-submenu">
<li class="d-block">Forklift Magnetic Sweepers</li>
<li class="d-block">Wheelie Bin Tippers</li>
<li class="d-block">Forklift Safety Cages</li>
<li class="d-block">Fork Extensions</li>
<li class="d-block">Forklift Base Emptying Stillages</li>
</ul>
</li>
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#4">Forklift Hooks & Jibs</a>
<ul class="dropdown-submenu">
<li class="d-block">Forklift Mounted Hook - Fixed</li>
<li class="d-block">Forklift Mounted Hook - Adjustable</li>
<li class="d-block">Crane Spreader Beams</li>
<li class="d-block">Forklift Jibs</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="page/About">About Us</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
I have put this together with Bootstrap 4 and some custom CSS:
.navbar-nav a {
color: #fff !important;
}
.navbar-nav a:hover {
color: #ddd !important;
}
.navbar-nav .submenu.level-2 {
padding-left: 1.5rem;
}
.navbar-nav .dropdown-toggle::after {
display: none;
}
#media (min-width: 768px) {
.navbar-nav .dropdown .submenu {
position: absolute;
top: 100%;
display: none;
}
.navbar-nav .dropdown .submenu li {
display: block;
}
.navbar-nav .dropdown .submenu li a {
display: block;
white-space: nowrap;
text-decoration: none;
}
.navbar-nav .dropdown .submenu.level-1 {
right: 0;
left: auto;
}
.navbar-nav .dropdown .submenu.level-2 {
padding-left: 0;
top: 0;
right: 100%;
left: auto;
}
.navbar-nav .dropdown:hover .submenu.level-1 {
display: block;
}
.navbar-nav .dropdown:hover .submenu.level-1 li {
position: relative;
}
.navbar-nav .dropdown:hover .submenu.level-1 li:hover .submenu.level-2 {
display: block;
}
.navbar-nav .dropdown-toggle::after {
display: inline-block;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Info</a>
<ul class="list-unstyled bg-dark text-light submenu level-1">
<li><a class="nav-link" href="#">About</a>
<ul class="list-unstyled bg-dark text-light submenu level-2">
<li><a class="nav-link" href="#">Mission</a></li>
<li><a class="nav-link" href="#">Vision</a></li>
</ul>
</li>
<li><a class="nav-link" href="#">Clients</a></li>
<li><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Here is a jsFiddle with SCSS instead of plain CSS.
I don't know how close it is to the result you are looking for, but I hope it helps.
As per my understanding, you are looking for nested submenu. If, yes below is the solution for same.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu:hover>.dropdown-menu {
top: 0;
left: -10rem;
/* 10rem is the min-width of dropdown-menu */
margin-top: -6px;
display:block
}
.dropdown:hover>.dropdown-menu{
display:block
}
/* rotate caret on hover */
.dropdown-menu>li>a:hover:after {
text-decoration: underline;
transform: rotate(-90deg);
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand pb-2" 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 ml-auto">
<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
</a>
<ul class="dropdown-menu dropdown-menu-right" 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 wider text</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu</a></li>
<li><a class="dropdown-item" href="#">Submenu0</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Source Skelly Codeply
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'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 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>