<html >
<head>
<meta charset="UTF-8">
<title>Bootstrap Responsive Mega Menu</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default megamenu">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown megamenu-fw">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Mega Menu <span class="caret"></span></a>
<ul class="dropdown-menu megamenu-content" role="menu">
<li>
<div class="row">
<div class="col-sm-4">
<h3 class="title">Featured Products</h3>
<div data-ride="carousel" class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active left">
<a href="#"><img alt="product 1" class="img-responsive" src="http://placehold.it/350x200/3498db/f5f5f5/&text=Featured+Product"></a>
<h4><small>Featured Product 1</small></h4>
<button type="button" class="btn btn-default" href="#"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item next left">
<a href="#"><img alt="product 2" class="img-responsive" src="http://placehold.it/350x200/ef5e55/f5f5f5/&text=Featured+Product"></a>
<h4><small>Featured Product 2</small></h4>
<button type="button" class="btn btn-default" href="#"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<a href="#"><img alt="product 3" class="img-responsive" src="http://placehold.it/350x200/2ecc71/f5f5f5/&text=Featured+Product"></a>
<h4><small>Featured Product 3</small></h4>
<button type="button" class="btn btn-default" href="#"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
</div>
</div><!-- end col-4 -->
<div class="col-sm-4">
<h3 class="title">Latest Tutorials</h3>
<ul class="media-list">
<li class="media"><a class="pull-right" href="#"><img width="70" class="img-thumbnail media-object" alt="" src="http://placehold.it/60x35/3498db/f5f5f5/&text=Featured+Product"></a>
<div class="media-body">
<p><a href="#">How To Master Fireworks’ CSS Properties Panel And CSS Professionalzr</a></p>
</div>
</li>
<li class="media"><a class="pull-right" href="#"><img width="70" class="img-thumbnail media-object" alt="" src="http://placehold.it/60x35/ef5e55/f5f5f5/&text=Featured+Product"></a>
<div class="media-body">
<p><a href="#">Making A Complete Polyfill For The HTML5 Details Element</a></p>
</div>
</li>
<li class="media"><a class="pull-right" href="#"><img width="70" class="img-thumbnail media-object" alt="" src="http://placehold.it/60x35/2ecc71/f5f5f5/&text=Featured+Product"></a>
<div class="media-body">
<p><a href="#">Creating A “Save For Later” Chrome Extension With Modern Web Tools</a></p>
</div>
</li>
<li class="media"><a class="pull-right" href="#"><img width="70" class="img-thumbnail media-object" alt="" src="http://placehold.it/60x35/3498db/f5f5f5/&text=Featured+Product"></a>
<div class="media-body">
<p><a href="#">Scaling Down The BEM Methodology For Small Projects</a></p>
</div>
</li>
</ul>
</div><!-- end col-4 -->
<div class="col-sm-4">
<h3 class="title">Google Map</h3>
<iframe width="340" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://my.ctrlq.org/maps/#roadmap|10|41.001769314909254|-74.88742636132815"></iframe>
</div><!-- end col-4 -->
</div><!-- end row -->
<hr>
<div class="row">
<div class="col-sm-6">
<h3 class="title">About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><!-- end col-6 -->
<div class="col-sm-3">
<h3 class="title">Follow Us</h3>
<p></p>
</div><!-- end col-3 -->
<div class="col-sm-3">
<h3 class="title">Subscribe</h3>
<form class="navbar-form nopadding" method="post" action="">
<input type="text" class="form-control" placeholder="Enter email" name="email">
<input type="submit" value="Go" class="btn btn-primary">
</form>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Gallery <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/* GLOBAL STYLE
-------------------------------------------------- */
body {
background:#f0f0f0;
}
.container{
padding-left: 0;
padding-right: 0;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
/* MEGAMENU STYLE
-------------------------------------------------- */
.megamenu .nav,
.megamenu .collapse,
.megamenu .dropup,
.megamenu .dropdown {
position: static;
}
.megamenu .container {
position: relative;
}
.megamenu .dropdown-menu {
left: auto;
}
.megamenu .megamenu-content {
padding: 15px;
}
.megamenu .megamenu-content h3{
margin-top: 0;
color: #428bca;
font-size: 18px;
}
.megamenu .dropdown.megamenu-fw .dropdown-menu {
left: 0;
right: 0;
}
jQuery(document).ready(function(){
$(".dropdown").hover(
function() { $('.dropdown-menu', this).fadeIn("fast");
},
function() { $('.dropdown-menu', this).fadeOut("fast");
});
});
