"Dropdown sliding menu to left"
Bootstrap 3.1.0 Snippet by Mehedi-BN

<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 ----------> <div class="container"> <h3>Dropdown sliding menu to left</h3> Click on "User" on bottom right of the page.<br /> then click on one of the buttons. </div> <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown dropd-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">User <b class="caret"></b></a> <ul class="dropdown-menu menu-bottom" style="min-width:250px;"> <li> <div style="text-align:center;"><img class="img-circle" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=100" alt="User Pic"> <br />Robin te Hofstee</div> <div class="inner-bottom settings"> <div class="col-xs-12"> <div class="offer offer-success"> <div class="offer-content"> <h3 class="lead"> A success offer </h3> <p> And a little description. <br> and so one </p> </div> </div> </div> </div> <div class="inner-bottom cart"> <div class="row"> <div class="col-xs-12"> <div class="panel panel-info"> <div class="panel-heading"> <div class="panel-title"> <div class="row"> <div class="col-xs-6"> <h5><span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart</h5> </div> <div class="col-xs-6"> <button type="button" class="btn btn-primary btn-sm btn-block"> <span class="glyphicon glyphicon-share-alt"></span> Continue shopping </button> </div> </div> </div> </div> <div class="panel-body"> <div class="row"> <div class="col-xs-2"><img class="img-responsive" src="http://placehold.it/100x70"> </div> <div class="col-xs-4"> <h4 class="product-name"><strong>Product name</strong></h4><h4><small>Product description</small></h4> </div> <div class="col-xs-6"> <div class="col-xs-6 text-right"> <h6><strong>25.00 <span class="text-muted">x</span></strong></h6> </div> <div class="col-xs-4"> <input type="text" class="form-control input-sm" value="1"> </div> <div class="col-xs-2"> <button type="button" class="btn btn-link btn-xs"> <span class="glyphicon glyphicon-trash"> </span> </button> </div> </div> </div> <hr> <div class="row"> <div class="col-xs-2"><img class="img-responsive" src="http://placehold.it/100x70"> </div> <div class="col-xs-4"> <h4 class="product-name"><strong>Product name</strong></h4><h4><small>Product description</small></h4> </div> <div class="col-xs-6"> <div class="col-xs-6 text-right"> <h6><strong>25.00 <span class="text-muted">x</span></strong></h6> </div> <div class="col-xs-4"> <input type="text" class="form-control input-sm" value="1"> </div> <div class="col-xs-2"> <button type="button" class="btn btn-link btn-xs"> <span class="glyphicon glyphicon-trash"> </span> </button> </div> </div> </div> </div> <div class="panel-footer"> <div class="row text-center"> <div class="col-xs-9"> <h4 class="text-right">Total <strong>$50.00</strong></h4> </div> <div class="col-xs-3"> <button type="button" class="btn btn-success btn-block"> Checkout </button> </div> </div> </div> </div> </div> </div> </li> <li class="divider" style="color:#212121;"></li> <li> <div class="btn-group-vertical" align="center"> <a href="#" class="click-settings pull-left btn btn-default"><i class="glyphicon glyphicon-cog"></i> Settings</a> <a href="#" class="click-cart pull-left btn btn-default"><i class="glyphicon glyphicon-shopping-cart"></i> Shopping Cart</a> </div> </li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
.inner-bottom { display:none; border: 1px solid #dddddd; z-index:-22; } .inner-bottom { position: absolute; top:0px; background-color:#fff; border-top-left-radius:2% !important; border-top-right-radius:2% !important; padding:1px; min-height:400px; } .menu-bottom { min-height:400px; border-top-left-radius:2% !important; border-top-right-radius:2% !important; }
$(document).ready(function(){ $('.menu-bottom').on('click', function(e){ e.stopPropagation(); }) if(!$('.dropd-menu').hasClass('open')){ $('.settings').removeClass('show').hide(); $('.cart').removeClass('show').hide(); } var width = $('.dropdown-menu').width(); var height = $('.menu-bottom').closest('ul').height(); $('.cart.inner-bottom').height(height+9); $('.cart.inner-bottom').css('right', "248px"); $('.cart.inner-bottom').css('width', '0px'); $('.settings.inner-bottom').height(height+9); $('.settings.inner-bottom').css('right', "248px"); $('.settings.inner-bottom').css('width', '0px'); $('.click-cart').on('click', function(e){ e.preventDefault(); e.stopPropagation(); if($('.cart').hasClass('show')){ $('.cart').animate({width:"0px"},{ queue: false, duration: 250, complete: function() { //$comment.css({ 'display': 'block' }) $('.cart').removeClass('show').hide(); } }); } else { e.stopPropagation(); $('.settings').animate({width:"0px"},{ queue: false, duration: 250, complete: function() { e.stopPropagation(); //$comment.css({ 'display': 'block' }) $('.settings').removeClass('show').hide(); } }); $('.cart.inner-bottom').show().animate({width:"600px"}).addClass('show'); } }) $('.click-settings').on('click', function(e){ e.preventDefault(); if($('.settings').hasClass('show')){ e.stopPropagation(); $('.settings').animate({width:"0px"},{ queue: false, duration: 250, complete: function() { //$comment.css({ 'display': 'block' }) $('.settings').removeClass('show').hide(); } }); } else { e.stopPropagation(); $('.cart').animate({width:"0px"},{ queue: false, duration: 250, complete: function() { //$comment.css({ 'display': 'block' }) $('.cart').removeClass('show').hide(); } }); $('.settings.inner-bottom').show().animate({width:"600px"}).addClass('show'); } e.stopPropagation(); }) })

Related: See More


Questions / Comments: