<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 class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- Mobile toggle button -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Click Me<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo -->
<a class="brand" href="#"><b>LOGO</b></a>
<!-- Navigation -->
<nav class="nav-collapse collapse">
<ul class="nav">
<li><a href="#top">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega Menu <b class="caret"></b></a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-column">
<ul>
<li class="nav-header">Image With Content</li>
<img src="https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg" width="150" height="120">
Welcome to the tutorial of Bootstrap mega menu. You can easily create mega menu using bootstrap.This mega menu is commonly used in E-commerce
Websites to interact peoples.
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header"><b>Some Useful Links<b></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<hr>
</ul>
</li>
<li class="mega-menu-column">
<ul>
<li class="nav-header">Mega menu 3</li>
<img src="http://placehold.it/150x120">
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
<li><a href="#">Mega-menu link</a></li>
</ul>
</li>
</ul><!-- dropdown-menu -->
</li><!-- /.dropdown -->
<li><a href="#about">About Us</a></li>
<li><a href="#pricing">Our Pricing</a></li>
<li><a href="#team">Our Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul><!-- /.nav -->
</nav><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.nav-inner -->
</header>
/* page style */
a, a:focus, a:active, a:hover, object, embed { outline: none; text-decoration: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }
:focus { outline: 0; }
body { background: #333; }
.brand { padding: 10px 40px !important; }
.navbar { border-bottom: 4px solid #888; }
/* MEGA MENU STYLE
********************************/
.mega-menu {
padding: 10px 0px ! important;
width: 540px;
border-radius: 0;
margin-top: 0px;
}
.mega-menu li {
display: inline-block;
float: left;
font-size: 0.94rem;
padding: 3px 0px;
}
.mega-menu li.mega-menu-column {
margin-right: 20px;
width: 150px;
}
.mega-menu .nav-header {
padding: 0 !important;
margin-bottom: 10px;
display: inline-block;
width: 100%;
border-bottom: 1px solid #ddd;
}
.mega-menu img { padding-bottom: 10px;}
/* Disable Toggle style
********************************/
/* Dropdown Toggle on style */
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
background: inherit; /* Set to inherit when using mouse hover to open dropdown */
color: inherit;
}
/* Toggle off style */
.navbar .nav li.dropdown.open.active > .dropdown-toggle,
.navbar .nav > li.dropdown > a:focus {
background: inherit;
color: inherit;
}
/* Toggle hover */
.navbar .nav li.dropdown > .dropdown-toggle:hover,
.navbar .nav li.dropdown.open > .dropdown-toggle:hover {
background-color: #DDDDDD;
}
/* Toggle caret*/
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-bottom-color:;
border-top-color:;
}
/* Toggle caret hover */
.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
border-bottom-color: #333;
border-top-color: #333;
}
/* Toggle caret active */
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-bottom-color:#333;
border-top-color: #333;
}
/* Hover style
********************************/
.navbar .nav > li > a, .mega-menu a
{
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
/* -webkit-transform: translate3d(0, 0, 0); Webkit Hardware Acceleration*/
-webkit-backface-visibility: hidden; /* Safari Flicker Fix #2 */
-webkit-transform: translateZ(0);
}
// Dropdown Menu Fade
jQuery(document).ready(function(){
$(".dropdown").hover(
function() { $('.dropdown-menu', this).fadeIn("fast");
},
function() { $('.dropdown-menu', this).fadeOut("fast");
});
});
