CodePen Embed - Bootstrap Modal Sidebar

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">

<button type="button" data-toggle="modal" data-target="#sidebar-right" class="btn btn-primary navbar-btn pull-left">Right Sidebar</button>

<button type="button" data-toggle="modal" data-target="#sidebar-left" class="btn btn-primary navbar-btn pull-right">Left Sidebar</button>

</div>
</nav>

<!-- Sidebar Left -->
<div class="modal fade left" id="sidebar-left" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Left Sidebar</h4>
</div>
<div class="modal-body">
<a href="#home" class="btn btn-block btn-default btn-lg">Home</a>

<!-- Split button -->
<div class="btn-group btn-block">
<a role="button" href="#services" class="text-left btn btn-lg btn-default col-xs-10">Services</a>
<button type="button" class="btn btn-lg btn-default col-xs-2 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-chevron-down"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#design">Design</a></li>
<li role="separator" class="divider"></li>
<li><a href="#develop">Develop</a></li>
<li role="separator" class="divider"></li>
<li><a href="#support">Support</a></li>
</ul>
</div>

<a href="#about" class="btn btn-block btn-default btn-lg">About</a>

<hr>

<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-fw fa-search"></i></button>
</span>
</div>
</div>

<hr>

<div class="btn-group btn-group-justified">
<a class="btn btn-instagram btn-lg" href="https://www.instagram.com/jorenerene/" target="_blank"><i class="fa fa-fw fa-instagram"></i></a>
<a class="btn btn-twitter btn-lg" href="https://www.twitter.com/jorenerene/" target="_blank"><i class="fa fa-fw fa-twitter"></i></a>
<a class="btn btn-github btn-lg" href="https://www.github.com/jorenerene/" target="_blank"><i class="fa fa-fw fa-github"></i></a>
</div>

</div>
</div>
</div>
</div>

<!-- Sidebar Right -->
<div class="modal fade right" id="sidebar-right" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Right Sidebar</h4>
</div>
<div class="modal-body">

<ul class="nav nav-pills nav-stacked text-center lead">
<li role="presentation" class="active"><a href="#home">Home</a></li>
<li role="presentation" class="dropdown">
<a href="#" class="dropdown-toggle" id="myTabDrop1" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">Services <span class="fa fa-fw fa-chevron-down"></span></a>
<ul class="dropdown-menu btn-block">
<li><a href="#design" role="tab">Design</a></li>
<li><a href="#develop" role="tab">Develop</a></li>
<li><a href="#support" role="tab">Support</a></li>
</ul>
</li>
<li role="presentation"><a href="#about">About</a></li>
</ul>

<hr>

<div class="form-group hide">
<div class="input-group">
<input class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-fw fa-search"></i></button>
</span>
</div>
</div>

<div class="form-group has-feedback">
<input type="text" class="form-control" id="search-right" placeholder="Search">
<span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
</div>

<hr>

<div class="btn-group-vertical center-block">
<a class="btn btn-instagram btn-lg" href="https://www.instagram.com/jorenerene/" target="_blank"><i class="fa fa-fw fa-instagram"></i></a>
<a class="btn btn-twitter btn-lg" href="https://www.twitter.com/jorenerene/" target="_blank"><i class="fa fa-fw fa-twitter"></i></a>
<a class="btn btn-github btn-lg" href="https://www.github.com/jorenerene/" target="_blank"><i class="fa fa-fw fa-github"></i></a>
</div>

</div>
</div>
</div>
</div>

<div class="container" id="home">
<div class="page-header">
<h1>Home</h1>
<p class="lead">Modified Bootstrap Modals make great Sidebar Menus; or Side Drawer Menus, depending on your preferred Framework.</p>
</div>
<img class="img-responsive" src="https://unsplash.it/1600/1000?image=818">
</div>

<div class="container">
<div id="services" class="page-header">
<h1>Services</h1>
</div>

<div class="row">
<div class="col-sm-offset-1 col-sm-11">

<div class="media">
<div class="media-left">
<i class="fa fa-5x fa-pencil fa-fw"></i>
</div>
<div class="media-body">
<h4 class="media-heading" id="design">Design</h4>
<p>Design is a specification of an object, manifested by an agent, intended to accomplish goals, in a particular environment, using a set of primitive components, satisfying a set of requirements, subject to constraints.</p>
</div>
</div>

<hr>

<div class="media">
<div class="media-left">
<i class="fa fa-5x fa-code fa-fw"></i>
</div>
<div class="media-body">
<h4 class="media-heading" id="develop">Develop</h4>
<p>Development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services.</p>
</div>
</div>

<hr>

<div class="media">
<div class="media-left">
<i class="fa fa-5x fa-life-ring fa-fw"></i>
</div>
<div class="media-body">
<h4 class="media-heading" id="support">Support</h4>
<p>Support refers to a plethora of services which provide assistance to users of technology products such as mobile phones, televisions, computers, software products or other informatic, electronic or mechanical goods.</p>
</div>
</div>

</div>
</div>

<div id="about" class="page-header">
<h1>About</h1>
</div>

<blockquote>
<p>Wake up with determination. Go to sleep with satisfaction.</p>
<footer>Someone somewhere on the <cite>internet</cite>.</footer>
</blockquote>

</div>
</div>

.pen body {
	padding-top:50px;
}

/* Social Buttons - Twitter, Facebook, Google Plus */
.btn-twitter {
	background: #00acee;
	color: #fff
}
.btn-twitter:link, .btn-twitter:visited {
	color: #fff
}
.btn-twitter:active, .btn-twitter:hover {
	background: #0087bd;
	color: #fff
}

.btn-instagram {
	color:#fff;
	background-color:#3f729b;
	border-color:rgba(0,0,0,0.2);
}
.btn-instagram:focus,.btn-instagram.focus {
	color:#fff;
	background-color:#305777;
	border-color:rgba(0,0,0,0.2);
}
.btn-instagram:hover {
	color:#fff;
	background-color:#305777;
	border-color:rgba(0,0,0,0.2);
}

.btn-github {
	color:#fff;
	background-color:#444;
	border-color:rgba(0,0,0,0.2);
}
.btn-github:focus,.btn-github.focus {
	color:#fff;
	background-color:#2b2b2b;
	border-color:rgba(0,0,0,0.2);
}
.btn-github:hover {
	color:#fff;
	background-color:#2b2b2b;
	border-color:rgba(0,0,0,0.2);
}

/* MODAL FADE LEFT RIGHT BOTTOM */
.modal.fade:not(.in).left .modal-dialog {
	-webkit-transform: translate3d(-25%, 0, 0);
	transform: translate3d(-25%, 0, 0);
}
.modal.fade:not(.in).right .modal-dialog {
	-webkit-transform: translate3d(25%, 0, 0);
	transform: translate3d(25%, 0, 0);
}
.modal.fade:not(.in).bottom .modal-dialog {
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}

.modal.right .modal-dialog {
	position:absolute;
	top:0;
	right:0;
	margin:0;
}

.modal.left .modal-dialog {
	position:absolute;
	top:0;
	left:0;
	margin:0;
}

.modal.left .modal-dialog.modal-sm {
	max-width:300px;
}

.modal.left .modal-content, .modal.right .modal-content {
	min-height:100vh;
	border:0;
}

$ (document).ready (function () {
	$ (".modal a").not (".dropdown-toggle").on ("click", function () {
		$ (".modal").modal ("hide");
	});
});

Run Pen

This Pen is owned by Jorene Rene on CodePen.

See more by @jorenerene on CodePen

External CSS

External JavaScript