Reputation: 556

Bootstrap3 Left Sidebar Right Toggle

I want to develop a web application with bootstrap.I have a left sidebar menu. I want that menu toggle from right while this page is opened from phone browser.
I want to create like this: https://formstone.it/

My example is here: https://jsfiddle.net/gd39damu/3/

html code:

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>

      </div>
    </nav>

    <div class="container">
    </div>

<div class="sidebar">
    <div class="navigation">

        <ul>
        <li><a  href="aa">aa</a></li>
        <li><a  href="bb">bb </a></li>
        <li><a  href="cc">cc</a></li>
        <li><a  href="dd">dd</a></li>
        </ul>
        </div>

</div> <!-- // Sidebar -->
</body>

css code:

 @import url('https://getbootstrap.com/dist/css/bootstrap.min.css');
    .sidebar {
      background-color: #aaaaaa;
    }

    @media (min-width: 800px) {
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        display: block;
      }

    .navigation {
        width: 240px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 5;
    }
    }

    .navigation {
        background: #455a64;
        overflow-y: auto;
        padding: 30px;
    }

    @media (max-width: 800px){
        .sidebar {
            display: none;
        }
    }

Upvotes: 0