"Mega menu with carousel for Stores"
Bootstrap 3.1.0 Snippet by osher135

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <html dir="rtl"> <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> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav pull-right"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">מוצרי חשמל <span class="glyphicon glyphicon-chevron-down pull-left"></span></a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">הדילים החמים</li> <div id="CrouselDealsNav" class="carousel slide" data-ride="carousel"><center> <div class="carousel-inner"> <div class="item active"> <a href="#"><img src="http://www.lastprice.co.il/uploadimages/480DW.jpg" class="img-responsive" alt="product 1"> <img src="http://www.lastprice.co.il/images/brands/small2/brother-logo.jpg" class="img-responsive degem" alt="product 1"> </a> <h3><small>מדפסת הזרקת דיו Brother MFCJ480DW</small></h3> <button class="btn btn-primary" type="button">רק 419 ₪</button> <button href="#" class="btn btn-default" type="button">02:19:58 <span class="glyphicon glyphicon-time"></span></button> </div><!-- End Item --> <div class="item"> <a href="#"><img src="http://www.lastprice.co.il/uploadimages/DC28C%20ORIGIN.jpg" class="img-responsive" alt="product 2"> <img src="http://www.lastprice.co.il/images/brands/small2/dyson-logo.jpg" class="img-responsive degem" alt="product 2"> </a> <h3><small>שואב אבק נגרר Dyson דייסון DC28C Origin</small></h3> <button class="btn btn-primary" type="button">רק 1,890 ₪</button> <button href="#" class="btn btn-default" type="button">02:19:58 <span class="glyphicon glyphicon-time"></span></button> </div><!-- End Item --> </div><!-- End Carousel Inner --> </div><!-- /.carousel --> <li class="divider"></li> <li><a href="#">לכל הדילים <span class="glyphicon glyphicon-chevron-left pull-left"></span></a></li> </ul> </li></center> <li class="col-sm-3"> <ul> <li class="dropdown-header">כביסה</li> <li><a href="#">מכונות כביסה חזית</a></li> <li><a href="#">מכונות כביסה עליון</a></li> <li><a href="#">מייבשי כביסה</a></li> <li><a href="#">מכונות משולבות מייבש</a></li> <li><a href="#">אביזרים ומתקנים</a></li> <li class="divider"></li> <li class="dropdown-header">אפייה ובישול</li> <li><a href="#">כיריים גז</a></li> <li><a href="#">כיריים גז</a></li> <li><a href="#">כיריים גז</a></li> <li><a href="#">כיריים גז</a></li> <li><a href="#">כיריים גז</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">מקררים ומקפיאים</li> <li><a href="#">מקררים</a></li> <li><a href="#">מקפיאים</a></li> <li class="divider"></li> <li class="dropdown-header">גיהוץ</li> <li><a href="#">מגהצי קיטור</a></li> <li><a href="#">מגהצי אדים</a></li> <li><a href="#">אביזרים לגיהוץ</a></li> <li class="divider"></li> <li class="dropdown-header">גיהוץ</li> <li><a href="#">מגהצי קיטור</a></li> <li><a href="#">מגהצי אדים</a></li> <li><a href="#">אביזרים לגיהוץ</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">עולם הקפה</li> <li><a href="#">מכונות אספרסו</a></li> <li><a href="#">פולים ופודים</a></li> <li><a href="#">אביזרים לקפה</a></li> <li><a href="#">מקינטות</a></li> <li><a href="#">מטחנות קפה</a></li> <li class="divider"></li> <li class="dropdown-header">הרשמו לקבלת מבצעים</li> <form class="form" role="form"> <div class="form-group"> <label class="sr-only" for="email">דוא"ל"</label> <input type="email" class="form-control" id="email" placeholder="הזינו את כתובת המייל"> </div> <button type="submit" class="btn btn-primary btn-block">השאירו אותי מעודכן</button> </form> </ul> </li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </nav> </div> </html>
@import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css); body { font-family: 'Noto Sans Hebrew', 'sans-serif'; background:#f0f0f0; } .navbar-nav>li>.dropdown-menu { margin-top:20px; border-top-left-radius:0px; border-top-right-radius:0px; } .navbar-nav { padding-right:0px !important; } .navbar-default { background-color:#000000; } .dropdown:hover .dropdown-menu { display: block; background-color:#ffffff; } dropdown mega-dropdown open { background-color:#ffffff; } .navbar-collapse { padding:0 !important; } .navbar-default .navbar-nav>li>a { width:138px; color:#ffffff; font-weight:bold; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { color:#ffffff; background-color:#fcb706; } .glyphicon { font-size:0.8em !important; padding-top: 0.4em !important; } .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; right: 50px; 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; right: 48px; 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; } .mega-dropdown-menu img { max-width:180px !important; margin:0 auto; } .mega-dropdown-menu .degem { max-width:80px !important; margin:0 auto; } .carousel-inner h3 { text-align:center; margin:10px 0px 10px 0px; width:70%; }

Related: See More

Navbar With Icons
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: