Skip to content

Instantly share code, notes, and snippets.

@dimkoug

dimkoug/mega_menu2.html

Created November 23, 2020 10:24
Show Gist options
  • Save dimkoug/9037c014d6a24e26347e25e5200bce2e to your computer and use it in GitHub Desktop.
Save dimkoug/9037c014d6a24e26347e25e5200bce2e to your computer and use it in GitHub Desktop.
Download ZIP
bootstrap4 mega menu
Raw
mega_menu2.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;
}
.mega-menu-container{
z-index:100;
position:absolute;
width:100%;
left:0px;
right:0px;
min-width: 100%;
border: 1px solid red;
background-color: #ffffff;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".mega-menu-container").hide();
$("body").on("click", "#mega-menu", function(e){
$(".mega-menu-container").fadeIn();
return false;
})
$("body").on("click", "#close-menu",function(e){
$(".mega-menu-container").fadeOut();
})
})
</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">Link</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">
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-primary" name="button" id="close-menu">Close</button>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="">Category 1 header</div>
<div class="row">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<div class="col-12">
<div class="">
Category 11 header
</div>
<div class="row">
<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">
<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