Bootstrap sidebar nav menu example

<div id="myslide-menu" class="slide-menu">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<nav class="navbar navbar-default">
  <div class="container-fluid">
  

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-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="#">Separated link</a></li> 
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-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="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
  </div>
 
<span style="font-size:30px;cursor:pointer" onclick="openNav()" class="open-menu">&#9776;</span>
</nav>

.mobile-menu { width:100% !important;}
    .slide-menu {  position:relative; }
    .slide-menu .closebtn { position:relative; display:none;}
    .open-menu { display:none;}
    .navbar-default { background:transparent; border:none;}
    

.navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color:transparent;}
    @media(max-width:767px){
    .slide-menu .closebtn { position:relative; display:block;}
    .open-menu { display:block;}
    .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav>li>a {
    color: #777;
    color: #fff;
    font-size: 17px;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover { color:#fff;}
    .slide-menu {
    height: 100%;
    width: 0px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.slide-menu a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.slide-menu a:hover {
    color: #f1f1f1;
}

.slide-menu .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .slide-menu {padding-top: 15px;}
  .slide-menu a {font-size: 18px;}
}
    .navbar-default .navbar-collapse, .navbar-default .navbar-form { display:block;}
    }

<script>	 
  function checkWidth() {
    if ($(window).width() > 767) {
   $('.slide-menu').addClass('mobile-menu'); 
   }
else {
    $('.slide-menu').removeClass('mobile-menu'); 
  $('.slide-menu').removeAttr("style")
    }
}
  $(window).resize(checkWidth);
  
  </script>

<script>
function openNav() {
    document.getElementById("myslide-menu").style.width = "250px";
}

function closeNav() {
    document.getElementById("myslide-menu").style.width = "0";
}
</script>