I'm currently working on creating a plug and play Mega-Menu using the collapse method which has proven to be quite effective so far.
However, I'm facing an issue with closing the collapsed item when clicking outside the menu. As a beginner in Javascript, utilizing jQuery for this task is a bit challenging for me.
Edit: I recently came across a more streamlined code that doesn't involve a mix of JavaScript and JQuery. Although I attempted to implement it, I'm still struggling to correctly target the .collapse() method.
The widget displayed below seems to have some other unrelated issues affecting its information display, similar to previous problems I've encountered. You can test out the code on this JSfiddle link.
JQuery (Edited):
$(document).mouseup(function(e) {
var container = $("#mega-menu");
// if the click event target isn't the container or one of its descendants
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.collapse();
}
Code:
.dropdown-mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
padding: 1rem;
border-radius: 0;
}
.mega-menu-toggle {
cursor: pointer;
}
.mega-menu-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
@media (max-width: 767px) {
.dropdown-mega-menu {
position: static;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Navigation -->
<nav class="navbar navbar-light bg-light navbar-expand-md sticky-top">
<div class="container">
<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 multi-collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link mega-menu-toggle" data-toggle="collapse" data-target="#mega-menu" role="button" aria-expanded="false" aria-controls="mega-menu">Dropdown link</a>
<div class="dropdown-mega-menu collapse multi-collapse" id="mega-menu">
<h3>Heading</h3>
<div class="row">
<div class="col-md">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Action</a>
</div>
<div class="col-md">
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
<div class="col-md">
<div>
Other none linked content.
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>