Bootstrap 3 Megamenu Script

A Bootstrap 3 CSS megamenu add-on that uses the standard navbar markup and the fluid grid system classes of Bootstrap 3. You can include almost any HTML element.

Author: SEO Creativity Price: Free MIT Type: Javascript,Bootstrap,CSS3

Bootstrap 3 Megamenu

VIEW DEMO

Open the Pages dropdown to see the Telha megamenu demo.

STEP 1

Copy the style tags into your style.css.

Click in textarea to select code then copy and paste Ctrl-CCtrl-V

/* Telha Megamenu 2 */ .telha-megamenu .mega-menu-2 { width: 80%; margin-left: auto !important; margin-right: auto !important } .dropdown.telha-megamenu { position: static } .dropdown.telha-megamenu .dropdown-menu {padding: 5px 0px; left: 0; right: 0 } .telha-megamenu .mega-menu-2 > li { display: inline-block; padding: 2px 4px; width: 100% } .mega-menu-2 ul > li a { margin: 5px 0; color: #435E7A; padding: 2px 10px 2px 4px; line-height: 1.8 } .mega-menu-2 ul > li a:hover, .mega-menu-2 ul > li.active a { color: #FFF; background-color: #0b8ecc; margin-bottom: 10px;padding: 2px 10px 2px 4px } .mega-menu-2 { margin: 0; padding: 0!important; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background: #EDEDED; background: -moz-linear-gradient(top, #FFFFFF 0%, #F2F2F2 41%, #EDEDED 100%); background: -webkit-linear-gradient(top, #FFFFFF 0%, #F2F2F2 41%, #EDEDED 100%); background: linear-gradient(to bottom, #FFFFFF 0%, #F2F2F2 41%, #EDEDED 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EDEDED',GradientType=0 )) } .mega-menu-column h4 { margin: 15px 0px; display: inline-block; width: 100%; color: #333333; font-size: 1.2em; font-weight: 400; text-align: left; padding-bottom: 4px; border-bottom: 1px solid #2c3e50 } .navbar-inverse .telha-megamenu .dropdown-menu.mega-menu-2 { margin: 0 } .mega-menu-2 img { padding-bottom: 10px } .mega-menu-2 > li [class*="col-"] { padding: 20px } .mega-menu-2 > li [class*="col-"]:nth-child(1) { background-color: inherit; color: inherit; margin: 0 } .mega-menu-2 > li [class*="col-"]:nth-child(2) { background-color: #E2EAF8; color: inherit; margin: 0 } .mega-menu-2 > li [class*="col-"]:nth-child(3) { background-color: inherit; color: inherit; margin: 0 } .mega-menu-2 > li [class*="col-"]:nth-child(4) { background-color: #E2EAF8; color: inherit; margin: 0 } .mega-menu-2 > li [class*="col-"]:nth-child(5) { background-color: inherit; color: inherit; margin: 0 } .mega-menu-2 > li [class*="col-"]:nth-child(6) { background-color: inherit; color: inherit; margin: 0 } .mega-menu-2 .mega-menu-column:hover { color: #EEE; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s }

STEP 2

Copy the Telha megamenu dropdown into your existing Bootstrap navbar and add rows and columns, and use elements such as div, span, and p to place everything. Add images, forms, and so forth.

Click in textarea to select code then copy and paste Ctrl-CCtrl-V

<li class="dropdown telha-megamenu"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Pages <span class="caret"></span></a> <ul class="dropdown-menu mega-menu-2 animated fadeInDown" role="menu"> <li> <div class="col-md-3 col-sm-3 mega-menu-column"> <h4>General</h4> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> <div class="col-md-3 col-sm-3 mega-menu-column"> <h4>FAQ</h4> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <h4>Gallery</h4> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> <div class="col-md-3 col-sm-3 mega-menu-column"> <h4>News</h4> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> <div class="col-md-3 col-sm-3 mega-menu-column"> <h4>Products</h4> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </li></ul> </li>

Adjust CSS and layout as is needed. Have fun!