<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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>

.sidenav{background-color:#111;height:100%;left:0;overflow-x:hidden;padding-top:60px;position:fixed;top:0;transition:.5s;width:0;z-index:1;} .sidenavR{background-color:#111;height:100%;overflow-x:hidden;padding-top:60px;position:fixed;right:0;top:0;transition:.5s;width:0;z-index:1;} .sidenav a,.sidenavR a{color:#818181;display:block;font-size:25px;padding:8px 8px 8px 32px;text-decoration:none;transition:.3s;} .sidenav a:hover,.offcanvas a:focus,.sidenavR a:hover,.offcanvas a:focus{color:#f1f1f1;} .sidenav .closebtn,.sidenavR .closebtn{font-size:36px;margin-left:50px;position:absolute;right:25px;top:0;} @media screen and max-height 450px { .sidenav,.sidenavR{padding-top:15px;} .sidenav a,.sidenavR a{font-size:18px;} }

function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } function openNavR() { document.getElementById("mySidenavR").style.width = "250px"; } function closeNavR() { document.getElementById("mySidenavR").style.width = "0"; }