<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"> <button class="btn btn-default" id="openMenu">Open Menu</button> <div class="menu" id="menu"> <div class="row"> <div class="col-md-12"> <button class="btn btn-default form-control" id="closeMenu">Close Menu</button> <ul class="list-group"> <li class="list-group-item">Menu 1</li> <li class="list-group-item">Menu 2</li> <li class="list-group-item">Menu 3</li> <li class="list-group-item">Menu 4</li> </ul> </div> </div> </div>

.menu{ display:none; width:100%; height:100%; transition: 1s; }

$(document).ready(function(){ $("#openMenu").click(function(){ $("#menu").toggle(); }); $("#closeMenu").click(function(){ $("#menu").hide(); }); });