<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>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="mySidenavR" class="sidenavR">
<a href="javascript:void(0)" class="closebtn" onclick="closeNavR()">×</a>
<a href="#">About 2</a>
<a href="#">Services 2</a>
<a href="#">Clients 2</a>
<a href="#">Contact 2</a>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<div class="row">
<div class="col-xs-1">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
<div class="col-xs-8 col-xs-offset-1 col-md-10 col-md-offset-0 text-center">
<h1>Sliding Left & Right Menus</h1>
</div>
<div class="col-xs-1">
<span style="font-size:30px;cursor:pointer" onclick="openNavR()">☰</span>
</div>
</div>
<p>Click the Elements to Open the Side Menus.</p>
</div>
</div>
</div>
