<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();
})
})
