<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 ---------->
<section style="background:#efefe9;">
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<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="#">MegaMenu</a>
</div>
<div class="collapse navbar-collapse js-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">
<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">
<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">
<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>
</div>
<!-- /.nav-collapse -->
</nav>
</div>
<h1 class="c-text"> Bootstrap Mega Menu </h1>
<div class="container">
<div class="row">
<div class="board">
<!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>-->
<div class="board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li class="active">
<a href="#home" data-toggle="tab" title="welcome">
<span class="round-tabs one">
<i class="glyphicon glyphicon-home"></i>
</span>
</a></li>
<li><a href="#profile" data-toggle="tab" title="profile">
<span class="round-tabs two">
<i class="glyphicon glyphicon-user"></i>
</span>
</a>
</li>
<li><a href="#messages" data-toggle="tab" title="bootsnipp goodies">
<span class="round-tabs three">
<i class="glyphicon glyphicon-gift"></i>
</span> </a>
</li>
<li><a href="#settings" data-toggle="tab" title="blah blah">
<span class="round-tabs four">
<i class="glyphicon glyphicon-comment"></i>
</span>
</a></li>
<li><a href="#doner" data-toggle="tab" title="completed">
<span class="round-tabs five">
<i class="glyphicon glyphicon-ok"></i>
</span> </a>
</li>
</ul></div>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<h3 class="head text-center">Welcome to Bootsnipp<sup>™</sup> <span style="color:#f48260;">♥</span></h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
<div class="tab-pane fade" id="profile">
<h3 class="head text-center">Create a Bootsnipp<sup>™</sup> Profile</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> create your profile <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
<div class="tab-pane fade" id="messages">
<h3 class="head text-center">Bootsnipp goodies</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
<div class="tab-pane fade" id="settings">
<h3 class="head text-center">Drop comments!</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
<div class="tab-pane fade" id="doner">
<div class="text-center">
<i class="img-intro icon-checkmark-circle"></i>
</div>
<h3 class="head text-center">thanks for staying tuned! <span style="color:#f48260;">♥</span> Bootstrap</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
/* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/
body {
font-family: 'Open Sans', 'sans-serif';
background: #f0f0f0;
background: url(https://pcbx.us/bfjb.jpg);
}
h1,
.h1 {
font-size: 36px;
text-align: center;
font-size: 5em;
color: #404041;
}
.navbar-nav>li>.dropdown-menu {
margin-top: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-default .navbar-nav>li>a {
width: 200px;
font-weight: bold;
}
.mega-dropdown {
position: static !important;
width: 100%;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #fff;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 285px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #ccc;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 283px;
z-index: 8;
}
.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;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight: bold;
}
.mega-dropdown-menu form {
margin: 3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
.board{
width: 75%;
margin: 60px auto;
height: 500px;
background: #fff;
/*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
}
.board .nav-tabs {
position: relative;
/* border-bottom: 0; */
/* width: 80%; */
margin: 40px auto;
margin-bottom: 0;
box-sizing: border-box;
}
.board > div.board-inner{
background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png);
background-size: 30%;
}
p.narrow{
width: 60%;
margin: 10px auto;
}
.liner{
height: 2px;
background: #ddd;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
/* background-color: #ffffff; */
border: 0;
border-bottom-color: transparent;
}
span.round-tabs{
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tabs.one{
color: rgb(34, 194, 34);border: 2px solid rgb(34, 194, 34);
}
li.active span.round-tabs.one{
background: #fff !important;
border: 2px solid #ddd;
color: rgb(34, 194, 34);
}
span.round-tabs.two{
color: #febe29;border: 2px solid #febe29;
}
li.active span.round-tabs.two{
background: #fff !important;
border: 2px solid #ddd;
color: #febe29;
}
span.round-tabs.three{
color: #3e5e9a;border: 2px solid #3e5e9a;
}
li.active span.round-tabs.three{
background: #fff !important;
border: 2px solid #ddd;
color: #3e5e9a;
}
span.round-tabs.four{
color: #f1685e;border: 2px solid #f1685e;
}
li.active span.round-tabs.four{
background: #fff !important;
border: 2px solid #ddd;
color: #f1685e;
}
span.round-tabs.five{
color: #999;border: 2px solid #999;
}
li.active span.round-tabs.five{
background: #fff !important;
border: 2px solid #ddd;
color: #999;
}
.nav-tabs > li.active > a span.round-tabs{
background: #fafafa;
}
.nav-tabs > li {
width: 20%;
}
/*li.active:before {
content: " ";
position: absolute;
left: 45%;
opacity:0;
margin: 0 auto;
bottom: -2px;
border: 10px solid transparent;
border-bottom-color: #fff;
z-index: 1;
transition:0.2s ease-in-out;
}*/
.nav-tabs > li:after {
content: " ";
position: absolute;
left: 45%;
opacity:0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #ddd;
transition:0.1s ease-in-out;
}
.nav-tabs > li.active:after {
content: " ";
position: absolute;
left: 45%;
opacity:1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #ddd;
}
.nav-tabs > li a{
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.nav-tabs > li a:hover{
background: transparent;
}
.tab-content{
}
.tab-pane{
position: relative;
padding-top: 50px;
}
.tab-content .head{
font-family: 'Roboto Condensed', sans-serif;
font-size: 25px;
text-transform: uppercase;
padding-bottom: 10px;
}
.btn-outline-rounded{
padding: 10px 40px;
margin: 20px 0;
border: 2px solid transparent;
border-radius: 25px;
}
.btn.green{
background-color:#5cb85c;
/*border: 2px solid #5cb85c;*/
color: #ffffff;
}
@media( max-width : 585px ){
.board {
width: 90%;
height:auto !important;
}
span.round-tabs {
font-size:16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.tab-content .head{
font-size:20px;
}
.nav-tabs > li a {
width: 50px;
height: 50px;
line-height:50px;
}
.nav-tabs > li.active:after {
content: " ";
position: absolute;
left: 35%;
}
.btn-outline-rounded {
padding:12px 20px;
}
}
jQuery(document).on('click', '.mega-dropdown', function(e) {
e.stopPropagation()
})
$(function(){
$('a[title]').tooltip();
});
