<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Mosaddek">
<meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
<link rel="shortcut icon" href="img/favicon.png">
<title>Mega Menu</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<!--external css-->
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<!-- Yamm styles-->
<link href="css/yamm.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
</head>
<body class="mega-nav">
<section id="container" class="">
<!--header start-->
<header class="header white-bg">
<div class="navbar-header">
<nav id="navbar-collapse-1" class="navbar navbar-expand-md navbar-light px-0">
<!--logo start-->
<a href="index.html" class="logo mt-0" >Flat<span>lab</span></a>
<!--logo end-->
<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 yamm mega-menu" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<!-- Classic list -->
<li class="nav-item dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Mega Menu </a>
<ul class="dropdown-menu wide-full">
<li class="nav-item">
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<ul class="col-sm-2 list-unstyled">
<li class="nav-item">
<p class="title">Standard</p>
</li>
<li class="nav-item"><a class="nav-link" href="#"> Normal Navigation </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Execellent menu </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Customizable </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Huge Components </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Bootstrap v3.2 </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Fontawesome </a></li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li class="nav-item">
<p class="title">Description</p>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="d-title">Title Goes Here</span>
<span class="d-desk">Description goes here</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="d-title">Amaging Dashboard</span>
<span class="d-desk">Build with BS3</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="d-title">2000 Satisfied Client</span>
<span class="d-desk">Max 5 star rating</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="d-title">Easy to Cutomize</span>
<span class="d-desk">Very easy to use</span>
</a>
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li class="nav-item">
<p class="title">Iconic</p>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-arrow-circle-right text-muted"></i> Right Angle </a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-desktop text-muted"></i> Desktop Icon </a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-laptop text-muted"></i> Laptop Icon</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-mobile text-muted"></i> Mobile Icon </a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-lock text-muted"></i> Lock Icon </a></li>
</ul>
<ul class="col-sm-3 list-unstyled">
<li class="nav-item">
<p class="title">Image + Description</p>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img class="icon-img" src="img/mega_icon1.png" alt=""/>
<span class="icon-desk">
<span class="d-title">Title Goes Here</span>
<span class="d-desk">Description goes here</span>
</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img class="icon-img" src="img/mega_icon2.png" alt=""/>
<span class="icon-desk">
<span class="d-title">Amaging Dashboard</span>
<span class="d-desk">Build with BS3</span>
</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img class="icon-img" src="img/mega_icon3.png" alt=""/>
<span class="icon-desk">
<span class="d-title">2000 Satisfied Client</span>
<span class="d-desk">Max 5 star rating</span>
</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<img class="icon-img" src="img/mega_icon4.png" alt=""/>
<span class="icon-desk">
<span class="d-title">Easy to Cutomize</span>
<span class="d-desk">Very easy to use</span>
</span>
</a>
</li>
</ul>
<ul class="col-sm-3 list-unstyled custom-nav-img">
<li class="nav-item">
<p class="title">Custom</p>
</li>
<li class="nav-item">
<p class="desk">
Consectetur ullamcorper purus a rutrum. Etiam dui nisi, hendrerit feugiat serisque et, cursus eu magna.
</p>
</li>
<div class="mega-bg"></div>
</ul>
</div>
</div>
</li>
</ul>
</li>
<!-- Accordion demo -->
<li class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Accordion Menu </a>
<ul class="dropdown-menu">
<li class="nav-item">
<div class="yamm-content">
<div class="row">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header py-0" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="card">
<div class="card-header py-0" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="card">
<div class="card-header py-0" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid 3 wolf moon officia aute, non cupidatat.
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- Classic dropdown -->
<li class="dropdown nav-item"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Classic Menu </a>
<ul role="menu" class="dropdown-menu">
<li class="nav-item"><a class="nav-link" tabindex="-1" href="#"> Action </a></li>
<li class="nav-item"><a class="nav-link" tabindex="-1" href="#"> Another action </a></li>
<li class="nav-item"><a class="nav-link" tabindex="-1" href="#"> Something else here </a></li>
<li class="nav-item"><a class="nav-link" tabindex="-1" href="#"> Separated link </a></li>
</ul>
</li>
<!-- Pictures -->
<li class="nav-item dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Images Menu </a>
<ul class="dropdown-menu">
<li class="nav-item">
<div class="yamm-content">
<div class="row">
<div class="col-xs-6 col-sm-2"><a href="#" class="m-thumb"><img src="img/mega-menu/mega-menu-images1.jpg"> Anim pariatur</a></div>
<div class="col-xs-6 col-sm-2"><a href="#" class="m-thumb"><img src="img/mega-menu/mega-menu-images2.jpg"> Reprehenderit</a></div>
<div class="col-xs-6 col-sm-2"><a href="#" class="m-thumb"><img src="img/mega-menu/mega-menu-images3.jpg"> Keffiyeh helvetica</a></div>
<div class="col-xs-6 col-sm-2"><a href="#" class="m-thumb"><img src="img/mega-menu/mega-menu-images4.jpg"> Pariatur cliche</a></div>
<div class="col-xs-6 col-sm-2"><a href="#" class="m-thumb"><img src="img/mega-menu/mega-menu-images5.jpg"> Food truck quinoa</a></div>
<div class="col-xs-6 col-sm-2"><a href="#" class="m-thumb"><img src="img/mega-menu/mega-menu-images6.jpg"> Leggings occaecat craft</a></div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!--header end-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!-- page start-->
Body content goes here
<!-- page end-->
</section>
</section>
<!--main content end-->
<!--footer start-->
<!-- <footer class="site-footer always-bottom">-->
<!-- <div class="text-center">-->
<!-- 2018 © FlatLab by VectorLab.-->
<!-- <a href="#" class="go-top">-->
<!-- <i class="fa fa-angle-up"></i>-->
<!-- </a>-->
<!-- </div>-->
<!-- </footer>-->
<!--footer end-->
</section>
<!-- js placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js"></script>
<script type="text/javascript" src="js/hover-dropdown.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="js/respond.min.js" ></script>
<!--right slidebar-->
<script src="js/slidebars.min.js"></script>
<!--common script for all pages-->
<script src="js/common-scripts.js"></script>
<script>
$(document).on('click', '.yamm .dropdown-menu', function(e) {
e.stopPropagation()
})
</script>
</body>
</html>