I have adapted the following Bootstrap 4 multi level dropdown menu however it also has Jquery to close the menu after a user makes a selection.
Having adapted this for Aurelia I dont want to use Jquery and think there is another way to close the dropdown using Aurelia I just dont know how…
How would I close a dropdown on clicking on an item?
Here is the View:
<template>
<require from="./navmenu.scss"></require>
<require from="./activeRoute"></require>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mainmenu mr-auto">
<a class="navbar-brand" href="#/home">JobsLedger</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="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li repeat.for="route of router.navigation">
<a href.bind="route.href" if.bind="!route.settings.nav" class=" ${route.href == topUrl ? 'active' : ''}">
${route.title}
</a>
<a href.bind="route.href" if.bind="route.settings.nav" class="dropdown-toggle ${route.href == topUrl ? 'active' : ''}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
${route.title}
</a>
<ul if.bind="route.settings.nav" class="dropdown-menu" aria-labelledby="navbarDropdown">
<li repeat.for="menu of route.settings.nav">
<a href.bind="menu.href" if.bind="!menu.settings.nav" class="dropdown-menu-link">
${menu.title}
</a>
<a href.bind="menu.href" if.bind="menu.settings.nav" class="dropdown-toggle dropdown-menu-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
${menu.title} <span class="caret-right"></span>
</a>
<ul if.bind="menu.settings.nav" class="dropdown-menu" aria-labelledby="navbarDropdown">
<li repeat.for="subMenu of menu.settings.nav">
<a href.bind="subMenu.href" if.bind="!subMenu.settings.nav" class="dropdown-menu-link">
${subMenu.title}
</a>
<a href.bind="subMenu.href" if.bind="subMenu.settings.nav" class="dropdown-toggle dropdown-subMenu-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
${subMenu.title} <span class="caret-right"></span>
</a>
<ul if.bind="subMenu.settings.nav" class="dropdown-menu" aria-labelledby="navbarDropdown">
<li repeat.for="lowestSubMenu of subMenu.settings.nav">
<a href.bind="lowestSubMenu.href" if.bind="!lowestSubMenu.settings.divider" class="dropdown-menu-link">
${lowestSubMenu.title}
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right mr-auto">
<li repeat.for="route of router.navigation" if.bind="route.settings.pos == 'right'" class="${route.href == topUrl ? 'active' : ''}">
<a href.bind="route.href" if.bind="!row.settings.nav">${ row.title }</a>
<a href.bind="route.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
if.bind="route.settings.nav">
${row.title}
<span class="caret"></span>
</a>
<ul if.bind="route.settings.nav" class="dropdown-menu">
<li repeat.for="menu of row.settings.nav">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
<li><a>Welcome ${userName}</a></li>
<li><a href="#" click.delegate="logout()">Log Out</a></li>
</ul>
</div>
</nav>
</template>
Here is the CSS:
.menu-area {
background: #d61a5e
}
.mainmenu ul li {
position: relative;
}
.mainmenu .dropdown-menu {
margin: 0;
padding: 0;
border-radius: 0;
top:auto
}
.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a, .navbar-expand-lg .navbar-nav .nav-link {
color: #aaa;
font-size: 16px;
text-transform: capitalize;
padding: 16px 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: block !important;
}
.mainmenu .active {
color: #fff;
background: #222;
}
/******************************Drop-down menu work on hover**********************************/
.mainmenu {
background: none;
border: 0 solid;
margin: 0;
padding: 0;
min-height: 15px;
width: 100%;
}
@media only screen and (min-width: 767px) {
.mainmenu .collapse ul li:hover > ul {
display: block;
}
.mainmenu .collapse ul ul {
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
display: none;
}
/*******/
.mainmenu .collapse ul ul li {
position: relative
}
.mainmenu .collapse ul ul li:hover > ul {
display: block
}
.mainmenu .collapse ul ul ul {
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none
}
/*******/
.mainmenu .collapse ul ul ul li {
position: relative
}
.mainmenu .collapse ul ul ul li:hover ul {
display: block
}
.mainmenu .collapse ul ul ul ul {
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none;
z-index: 1
}
}
@media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a {
padding: 16px 15px 16px 35px
}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a {
padding: 16px 15px 16px 45px
}
}
EDIT
Ok so I get the impression that I should be able to side step any required Jquery implementation with Aurelia and that I infact should try and not use Jquery given that Aurelia should have a better easier solution…
Here is the Jquery I need to replace (if I can replace) how to write this for Aurelia:
(function($){
$('.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;
});
})(jQuery)