"Accordion Menu Horizontal"
Bootstrap 3.3.0 Snippet by naviego

<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 ----------> <div id="menuEstatic" class="navbar navbar-default navbar-static-top hidden-xs"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul id="submenu" class="nav navbar-nav"> <li class="dropdownEstatic dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <span class="glyphicon glyphicon-menu-down pull-right"></span> </a> <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu"> <div class="container"> <li> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> </li> </div> </ul></li> <li class="dropdownEstatic dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <span class="glyphicon glyphicon-menu-down pull-right"></span> </a> <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu"> <div class="container"> <li> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> </li> </div> </ul></li> <li class="dropdownEstatic dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <span class="glyphicon glyphicon-menu-down pull-right"></span> </a> <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu"> <div class="container"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Glyphicons</li> <li><a href="#">Available glyphs</a></li> <li class="disabled"><a href="#">How to use</a></li> <li><a href="#">Examples</a></li> <li class="divider"></li> <li class="dropdown-header">Dropdowns</li> <li><a href="#">Example</a></li> <li><a href="#">R</a></li> <li><a href="#">Headers</a></li> <li><a href="#">Q</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Button groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Button toolbar</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Nesting</a></li> <li><a href="#">3</a></li> <li class="divider"></li> <li class="dropdown-header">2</li> <li><a href="#">1</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Input groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Checkboxes and radio addons</a></li> <li class="divider"></li> <li class="dropdown-header">Navs</li> <li><a href="#">Tabs</a></li> <li><a href="#">Pills</a></li> <li><a href="#">Justified</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Navbar</li> <li><a href="#">Default navbar</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Text</a></li> <li><a href="#">Non-nav links</a></li> <li><a href="#">Component alignment</a></li> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> </ul> </li> </div> </ul></li> </ul> </div> </div> <div id="menuEstatic" class="visible-xs"> <div class="collapse in"> <ul id="submenu" class="nav navbar-nav"> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <span class="glyphicon glyphicon-menu-down pull-right"></span> </a> <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu"> <div class="container"> <li> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> </li> </div> </ul></li> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <span class="glyphicon glyphicon-menu-down pull-right"></span> </a> <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu"> <div class="container"> <li> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://placehold.it/150x120" /> </a> </div> </li> </div> </ul></li> <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <span class="glyphicon glyphicon-menu-down pull-right"></span> </a> <ul id="menuEstaticoFlecha" class="dropdown-menu megamenu"> <div class="container"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Glyphicons</li> <li><a href="#">Available glyphs</a></li> <li class="disabled"><a href="#">How to use</a></li> <li><a href="#">Examples</a></li> <li class="divider"></li> <li class="dropdown-header">Dropdowns</li> <li><a href="#">Example</a></li> <li><a href="#">R</a></li> <li><a href="#">Headers</a></li> <li><a href="#">Q</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Button groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Button toolbar</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Nesting</a></li> <li><a href="#">3</a></li> <li class="divider"></li> <li class="dropdown-header">2</li> <li><a href="#">1</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Input groups</li> <li><a href="#">Basic example</a></li> <li><a href="#">Sizing</a></li> <li><a href="#">Checkboxes and radio addons</a></li> <li class="divider"></li> <li class="dropdown-header">Navs</li> <li><a href="#">Tabs</a></li> <li><a href="#">Pills</a></li> <li><a href="#">Justified</a></li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">Navbar</li> <li><a href="#">Default navbar</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Text</a></li> <li><a href="#">Non-nav links</a></li> <li><a href="#">Component alignment</a></li> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> </ul> </li> </div> </ul></li> </ul> </div> </div>
#columnaColor-3{ background: #2e373c; margin-right: -30px; } #top-header-navigation .collapse ul li:after{ content: ''; position: absolute; top: 18px; right: 0; display: block; height: 20px; width: 1px; opacity: .15; background: rgba(0, 0, 0, 0.7); /* background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0)); */ /* background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0)); */ background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0)); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0)); background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0)); } #top-header-navigation .collapse ul > li:before { content: ''; position: absolute; top: 18px; right: -1px; display: block; height: 20px; width: 1px; opacity: .35; background: rgba(255, 255, 255, 0.8); background: linear-gradient(to top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0)); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0)); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.01), #ffffff, rgba(255, 255, 255, 0.01)); background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0)); } #menuEstatic .navbar-default { color: #fff; background-color: #ccc6c6; border-color: #aca1a2; } #menuEstatic .navbar-default .navbar-nav>li>a { color: #fff; } #menuEstatic .navbar-default .navbar-nav>.dropdown>a .caret { border-top-color: #fff; border-bottom-color: #fff; } #menuEstatic .navbar-default .navbar-brand { color: #fff; } .menu-large { position: static !important; } .megamenu { padding: 20px 0px; width: 100%; } #dropdownEstatic{ float: left; width: 33.3%; } #submenu { margin-bottom: 0px!important; width: 100%; padding-top: 5px; } .dropdownEstatic { float: left; width: 33.3%; } #menuEstaticoFlecha{ margin-top: 4px; background: rgba(255,255,255,0.9); opacity: 1!important; } #menuEstaticoFlecha::before, #menuEstaticoFlecha::after { border: none; content: none; }

Related: See More


Questions / Comments: