<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header role="banner" class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MegaMenu Prokash Sarker</a>
</div>
<div class="navbar-inverse side-collapse in">
<nav role="navigation" class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">New in Stores</li>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
<div class="item">
<a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
</div>
<!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3 fn-1">
<ul>
<li class="dropdown-header">Dresses</li>
<li><a href="#">Unique Features</a></li>
<li><a href="#">Image Responsive</a></li>
<li><a href="#">Auto Carousel</a></li>
<li><a href="#">Newsletter Form</a></li>
<li><a href="#">Four columns</a></li>
<li class="divider"></li>
<li class="dropdown-header">Tops</li>
<li><a href="#">Good Typography</a></li>
</ul>
</li>
<li class="col-sm-3 fn-1">
<ul>
<li class="dropdown-header">Jackets</li>
<li><a href="#">Easy to customize</a></li>
<li><a href="#">Glyphicons</a></li>
<li><a href="#">Pull Right Elements</a></li>
<li class="divider"></li>
<li class="dropdown-header">Pants</li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
<li><a href="#">Calls to action</a></li>
</ul>
</li>
<li class="col-sm-3 fn-1">
<ul>
<li class="dropdown-header">Accessories</li>
<li><a href="#">Default Navbar</a></li>
<li><a href="#">Lovely Fonts</a></li>
<li><a href="#">Responsive Dropdown </a></li>
<li class="divider"></li>
<li class="dropdown-header">Newsletter</li>
<form class="form" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container side-collapse-container">
<div class="row">
<h1>Hello</h1>
<p>This is a side opening nav demonstration</p>
<p>Prokash sarker email:prokash600@gmail.com</p>
<p>Make your browser smaller and the top menu wil become into a lateral slider menu</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend gravida enim ut convallis. Cras non facilisis nunc, id ullamcorper libero. Nam interdum dapibus sem vel ornare. Maecenas vel pretium neque. Etiam quis nisi risus. Donec mi magna, imperdiet in congue nec, fermentum a magna. Quisque non mi vitae mauris faucibus elementum sed et orci. Nunc vitae porta mauris, et molestie justo. Suspendisse maximus sem sit amet purus tincidunt, a luctus lacus imperdiet. Etiam vitae quam vel magna mollis finibus. Ut pretium nisl et lacus egestas, et fermentum ligula tempor. Phasellus non turpis aliquam, ultricies elit sed, blandit dolor. Phasellus facilisis libero nunc, vitae tincidunt magna lobortis sit amet. Proin finibus interdum orci vitae euismod. Morbi facilisis enim vitae arcu pulvinar, in tristique lectus fermentum.
Vestibulum vel gravida neque. Nam eget malesuada lorem, quis facilisis nulla. Mauris bibendum hendrerit lacus eu imperdiet. Etiam convallis vel est nec lacinia. Nam id orci placerat, ullamcorper dolor vel, sollicitudin sem. Aliquam cursus, lacus a tristique ultrices, mi lorem suscipit lectus, a ultrices magna ligula sed nulla. In hac habitasse platea dictumst.
Fusce tempus porta ligula, non interdum ex sagittis at. Nunc laoreet magna sed libero laoreet dignissim. Sed eu consectetur magna. In fringilla, eros id gravida aliquet, enim lectus ultricies nulla, a iaculis metus tellus non arcu. Morbi luctus mi id sem sodales aliquet. Pellentesque sagittis lectus metus, nec sollicitudin tellus posuere blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tincidunt scelerisque libero, sed aliquam leo auctor eu. Donec mattis consequat nibh, et viverra justo laoreet egestas. Etiam nec ipsum dolor. Duis elementum dui rhoncus ante pulvinar euismod. Sed mattis libero nisi, sit amet gravida ex venenatis tristique. Morbi accumsan enim eget felis tincidunt finibus. Maecenas tempus turpis diam, sit amet finibus arcu consequat vel. Sed a leo at mauris viverra laoreet sit amet sit amet nunc. Aenean aliquet orci sit amet finibus vestibulum.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam faucibus urna magna, et maximus quam convallis ut. Donec tristique dolor ac sem mattis venenatis ut blandit elit. Suspendisse id mollis massa, et euismod felis. Nam a nunc mi. Praesent dictum libero non nunc facilisis, in eleifend diam luctus. Cras cursus eros sit amet cursus posuere. Pellentesque malesuada turpis quis pulvinar suscipit. Nulla at pretium erat.
Cras sed commodo metus. Fusce commodo lacus purus, eget ultricies mauris posuere sollicitudin. In non risus et libero scelerisque mollis et sed tellus. Quisque eget mi tempus, ultricies turpis laoreet, interdum elit. Aenean lobortis bibendum nunc, ac mattis odio vehicula in. Sed rhoncus sem eget augue mollis dictum. Donec quis laoreet ipsum. Quisque et mollis risus. Aliquam auctor orci id enim rutrum accumsan. Aenean eget sem consequat, aliquam ligula quis, fringilla dolor. Vestibulum in fermentum urna, nec rhoncus arcu. Fusce quis magna justo. In dolor lorem, scelerisque vel nulla a, dapibus fringilla nisl. Donec volutpat, sem a consectetur scelerisque, odio nisl faucibus felis, et tincidunt neque lacus in ipsum. Fusce eros lacus, varius in nisi in, egestas pretium metus.
</p>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
pre {
tab-size: 8;
}
body {
font-family: 'Open Sans', 'sans-serif';
padding-top: 50px;
position: relative;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.carousel-control {
width: 30px;
height: 30px;
top: -35px;
}
.left.carousel-control {
right: 30px;
left: inherit;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
font-size: 12px;
background-color: #fff;
line-height: 30px;
text-shadow: none;
color: #333;
border: 1px solid #ddd;
}
@media screen and (max-width: 768px) {
.side-collapse-container{
width:100%;
position:relative;
left:0;
transition:left .4s;
}
.side-collapse-container.out{
left:200px;
}
.side-collapse {
top:50px;
bottom:0;
left:0;
width:200px;
position:fixed;
overflow:hidden;
transition:width .4s;
}
.side-collapse.in {
width:0;
}
.fn-1 ul li a{
color:#fff!important;
}
.side-collapse {
overflow-y: scroll;
}
}
$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]');
var sel = sideslider.attr('data-target');
var sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel).toggleClass('in');
$(sel2).toggleClass('out');
});
});
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
$('#about_us_dropdown').slideDown();
$('#about_us_dropdown').toggleClass('open');
});
