How to make a sliding mobile menu in Bootstrap?

Question

css

There is a plugin for implementing a slide-out menu in Bootstrap. How to do the same, but so that the content shift does not go to the left / right, but from the top?

Answer 1

What is the actual problem?
If you know CSS and transitions, then for you to change from right / left to top should not be a problem.
in the example that you threw above, it just shifts the position left and translate of the left block, do the same from above, what's the problem, or do you want to be done for you?

Answer 2

You don't need a plugin for this, there is a standard solution from Bootstrap :

<nav class="navbar navbar-default navbar-static-top navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
          <span class="sr-only">Показать меню</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">testAPP</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Menu Left 1</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#" data-toggle="modal"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Menu Right 1</a></li>
        </ul>
      </div>
    </div>
  </nav>

UPD: The only thing is that it works under a mobile browser (or if you narrow the browser window to 768px). There is a navbar-collapse class that has conditions applied to it that modify the navigation when the screen width is small. By analogy, you can write your class without restrictions or remove (rewrite) restrictions so that it works at any width.