"Tutorial mega menu"
Bootstrap 3.3.0 Snippet by kuntal

<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"); }); });

Related: See More


Questions / Comments: