"eCommerce Shop Navigation"
Bootstrap 3.3.0 Snippet by IdeaFactorie

<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" > <div class="container"> <div class="row"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-info cat"><h4><i class="fa fa-bars" aria-hidden="true"></i> CATEGORIES</h4></a> <a href="#" class="btn btn-default"><h4>ABOUT</h4></a> <a href="#" class="btn btn-default"><h4>RETURNS</h4></a> <a href="#" class="btn btn-default"><h4>DELIVERY</h4></a> </div> <div class="col-md-12 shop-tab-container"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 shop-tab-menu"> <div class="list-group"> <a href="#" class="list-group-item"> <h4><i class="fa fa-chevron-right" aria-hidden="true"></i> Laptop & PC's</h4> </a> <a href="#" class="list-group-item"> <h4><i class="fa fa-chevron-right" aria-hidden="true"></i> Cameras</h4> </a> <a href="#" class="list-group-item"> <h4><i class="fa fa-chevron-right" aria-hidden="true"></i> Mens Clothing</h4> </a> <a href="#" class="list-group-item"> <h4><i class="fa fa-chevron-right" aria-hidden="true"></i> Womens Clothing</h4> </a> <a href="#" class="list-group-item"> <h4><i class="fa fa-chevron-right" aria-hidden="true"></i> Watches</h4> </a> <a href="#" class="list-group-item"> <h4><i class="fa fa-chevron-right" aria-hidden="true"></i> Tablets</h4> </a> <a href="#" class="list-group-item"> <h4><i class="fa fa-chevron-right" aria-hidden="true"></i> All Categories</h4> </a> </div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 shop-tab"> <div class="shop-tab-content active"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/800x400" alt="..."> <div class="carousel-caption"> <h2>Heading</h2> </div> </div> <div class="item"> <img src="http://placehold.it/800x400" alt="..."> <div class="carousel-caption"> <h2>Heading</h2> </div> </div> <div class="item"> <img src="http://placehold.it/800x400" alt="..."> <div class="carousel-caption"> <h2>Heading</h2> </div> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <hr> <h2>Made By IdeaFactorie</h2> </div> </div> </div>
div.shop-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border-radius: 0px; -moz-border-radius: 0px; border:1px solid #ddd; margin-top: 0px; margin-left: 0px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } div.shop-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } div.shop-tab-menu div.list-group{ margin-bottom: 0; } div.shop-tab-menu div.list-group>a{ margin-bottom: 0; } div.shop-tab-menu div.list-group>a .glyphicon, div.shop-tab-menu div.list-group>a .fa { color: #bee5eb; } div.shop-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.shop-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.shop-tab-menu div.list-group>a.active, div.shop-tab-menu div.list-group>a.active .glyphicon, div.shop-tab-menu div.list-group>a.active .fa{ background-color: #ffffff; background-image: #5A55A3; color: #5A55A3; } div.shop-tab-content{ background-color: #ffffff; /* border: 1px solid #eeeeee; */ padding-left: 5px; padding-top: 15px; padding-bottom: 10px; vertical-align: text-middle; } .list-group-item { position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: -1px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.120); } .btn-group { padding-top: 20px; } .btn-group > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0rem; } .cat { text-align: left; } .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: relative; width: 100%; height: 360px; } .carousel-inner { border-radius: 0px; } .carousel-caption { background-color: rgba(0,0,0,.5); position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; padding: 0 0 10px 25px; color: #fff; text-align: left; } .carousel-indicators { position: absolute; bottom: 0; right: 0; left: 0; width: 100%; z-index: 15; margin: 0; padding: 0 25px 25px 0; text-align: right; } .carousel-control.left, .carousel-control.right { background-image: none; }

Related: See More


Questions / Comments: