<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Offcanvas Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" data-toggle="offcanvas-dropdown" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="offcanvas-toggle"><a href="#"><strong>Offcanvas link</strong></a></li>
<li class="offcanvas-content">
<div class="offcanvas-toggle text-right text-muted"><em class="glyphicon glyphicon-remove"></em></div>
<p>Pellentesque laoreet dapibus aliquam. Morbi fermentum tortor vitae urna placerat sit amet mollis odio eleifend. </p>
</li>
</ul>
</div>
//
// OffCanvas Dropdown
//
.dropdown-menu[data-toggle="offcanvas-dropdown"] {
overflow: hidden;
> li > a {
-webkit-transition: -webkit-transform ease .2s;
}
&.open {
.offcanvas-content {
right: 0;
left: 15px;
box-shadow: 0 0 100px rgba(0, 0, 0, 0.75);
}
> li > a {
-webkit-transform: translateX(-50%);
}
}
}
.offcanvas-content {
position: absolute;
top:0; bottom: 0;
right: -100%;
left: 100%;;
background-color: #fff;
overflow-y: auto;
transition: all ease .2s;
-webkit-transition: all ease .2s;
}
.offcanvas-toggle {
font-weight: bold;
cursor: pointer;
}
// Styling
body {
margin: 50px;
text-align: center;
background-color: #f1f2f3;
}
.dropdown-menu {
text-align: left;
box-shadow: none;
}
.offcanvas-content {
padding: 5px 10px;
}
View Compiled
$(function(){
var selector = '[data-toggle="offcanvas-dropdown"]',
selectorToggle = '.offcanvas-toggle',
selectorContent = '.offcanvas-content',
$element = $(selector)
;
// disable dropdown on custom elements
$(document)
.on('click.bs.dropdown',
selectorToggle + ',' + selectorContent,
function(e) {
e.stopPropagation();
})
.on('click', selectorToggle, toggleOffCanvas);
// dropdown triggers event on parent element
$('.btn-group').on('hidden.bs.dropdown', closeOffCanvas)
// API
function toggleOffCanvas() {
$element.toggleClass('open');
}
function closeOffCanvas() {
$element.removeClass('open');
}
})
