<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 ----------> <!-- Navigation --> <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"> <span class="glyphicon glyphicon-book"></span> </a> <nav id="sidebar-wrapper"> <ul class="sidebar-nav"> <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a> <li class="sidebar-brand"> <a href="#top" onclick = $("#menu-close").click(); >Start Bootstrap</a> </li> <li> <a href="#top" onclick = $("#menu-close").click(); >Home</a> </li> <li> <a href="#about" onclick = $("#menu-close").click(); >About</a> </li> <li> <a href="#services" onclick = $("#menu-close").click(); >Services</a> </li> <li> <a href="#portfolio" onclick = $("#menu-close").click(); >Portfolio</a> </li> <li> <a href="#contact" onclick = $("#menu-close").click(); >Contact</a> </li> </ul> </nav> <script> // Closes the sidebar menu $("#menu-close").click(function(e) { e.preventDefault(); $("#sidebar-wrapper").toggleClass("active"); }); // Opens the sidebar menu $("#menu-toggle").click(function(e) { e.preventDefault(); $("#sidebar-wrapper").toggleClass("active"); }); </script>

/* Custom Button Styles */ .btn-dark { border-radius: 0; color: #fff; background-color: rgba(0,0,0,0.4); } .btn-dark:hover, .btn-dark:focus, .btn-dark:active { color: #fff; background-color: rgba(0,0,0,0.7); } .btn-light { border-radius: 0; color: #333; background-color: rgb(255,255,255); } .btn-light:hover, .btn-light:focus, .btn-light:active { color: #333; background-color: rgba(255,255,255,0.8); } /* Side Menu */ #sidebar-wrapper { z-index: 1000; position: fixed; right: 0; width: 250px; height: 100%; margin-right: -250px; overflow-y: auto; background: #222; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 55px; font-size: 18px; line-height: 55px; } .sidebar-nav > .sidebar-brand a { color: #999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } #menu-toggle { z-index: 1; position: fixed; top: 0; right: 0; } #sidebar-wrapper.active { right: 250px; width: 250px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }