Skip to content

Instantly share code, notes, and snippets.

@dimkoug

dimkoug/sample_mega_menu.html

Last active May 14, 2021 15:03
Show Gist options
  • Save dimkoug/c8228d8b548332d706b4eb38503b9347 to your computer and use it in GitHub Desktop.
Save dimkoug/c8228d8b548332d706b4eb38503b9347 to your computer and use it in GitHub Desktop.
Download ZIP
sample_mega_menu
Raw
sample_mega_menu.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style media="screen">
body html {
width:100%;
height:100%;
padding: 0;
margin: 0;
}
div[class*="mega-menu-container-"]{
z-index:100;
position:absolute;
width:100%;
height: 200px;
left:0px;
right:0px;
min-width: 100%;
border: 1px solid red;
background-color: #ffffff;
min-height: 200px;
overflow-x: scroll;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("div[class*='mega-menu-container-']").hide();
$("body").on("click", "[id^='mega-menu-']", function(e){
var id = $(this).attr('id').split("-")[2];
console.info(id);
console.info("class:not(mega-menu-container-"+id+")");
$("div[class*='mega-menu-container-']").not(".mega-menu-container-"+id+"").hide();
$(".mega-menu-container-"+id+"").fadeToggle("slow");
return false;
})
})
</script>
</head>
<body>
<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="#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="#" id="mega-menu-1">Mega Menu</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container mega-menu-container-1">
<div class="row py-2">
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row py-2">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row py-2">
<div class="col-12">
<div><a href="#">1</a></div>
<div><a href="#">2</a></div>
<div><a href="#">3</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row py-2">
<div class="col-12">
hi
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment