Skip to content
Simple Bootstrap (Left) Slide Menu
Branch: master
Clone or download
Latest commit cdf4bd5 Oct 8, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Initial commit Oct 8, 2015
README.md Update README.md Oct 8, 2015
bootstrap-left-slide-menu.css Rename SlideMenu.css to bootstrap-left-slide-menu.css Oct 8, 2015
bootstrap-left-slide-menu.js Rename SlideMenu.js to bootstrap-left-slide-menu.js Oct 8, 2015

README.md

bootstrap-left-slide-menu

Simple Bootstrap (Left) Slide Menu

https://jsfiddle.net/fragcoder/knkd8q1g/

USAGE:

<html>
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://rawgit.com/FragCoder/bootstrap-left-slide-menu/master/bootstrap-left-slide-menu.css">
 </head>
 <body>
    <div id="wrapper" class="">
       <div class="overlay" style="display: none;"></div>
       <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
          <ul class="nav sidebar-nav">
             <li class="sidebar-brand">
                <a href="#"> BLESM </a>
             </li>
             <li>
                <a href="#"><i class="glyphicon glyphicon-camera"></i> Photo</a>
             </li>
             <li>
                <a href="#"><i class="glyphicon glyphicon-facetime-video"></i> Video</a>
             </li>
             <li>
                <a href="#"><i class="glyphicon glyphicon-headphones"></i> Music</a>
             </li>
             <li>
                <a href="#"><i class="glyphicon glyphicon-cloud"></i> Cloud</a>
             </li>
             <li>
                <a href="#"><i class="glyphicon glyphicon-th"></i> Apps</a>
             </li>
             <li>
                <a href="#"><i class="glyphicon glyphicon-cog"></i> Settings</a>
             </li>
          </ul>
       </nav>
       <div id="page-content-wrapper">
          <button type="button" class="hamburger animated fadeInLeft is-closed" data-toggle="offcanvas">
          <span class="hamb-top"></span>
          <span class="hamb-middle"></span>
          <span class="hamb-bottom"></span>
          </button>
          <div class="container">
             ...YOUR CONTENT...
          </div>
       </div>
    </div>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://rawgit.com/FragCoder/bootstrap-left-slide-menu/master/bootstrap-left-slide-menu.js"></script>
 </body>
</html>
You can’t perform that action at this time.