Minimize sidebar bootstrap

Question

I have been browsing stackoverflow for a long time, but cannot find the answer.

Is there a way for the navigation bar to roll sideways using bootstrap? I mean, you usually have a horizontal navigation bar, and then when it is compressed, it goes out of the side, and does not fall from top to bottom when the button is pressed. Does this make sense? I'm sorry that I cheat on this, but it's hard to explain.

Thank you for your help.

Answer 1

This will probably give you a reason to start, if nothing else.

data data-toggle="collapse", , 768px. <div class="navbar-default side-collapse open">, CSS , .

Docs, .

. Snippet

$(document).ready(function() {
  $('[data-toggle=collapse-side]').click(function(e) {
    $('.side-collapse').toggleClass('open');
  });
});

@media screen and (max-width: 768px) {
  .navbar-side .side-collapse {
    top: 50px;
    bottom: 0;
    left: 0;
    width: 256px;
    position: fixed;
    overflow: auto;
    transition: all 0.3s cubic-bezier(.87, -.41, .19, 1.44);
  }
  .navbar-side .side-collapse.open {
    width: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-side navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button data-toggle="collapse-side" data-target=".side-collapse" type="button" class="navbar-toggle"><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="#">Brand</a> 
    </div>
    <div class="navbar-default side-collapse open">
      <div class="navbar-collapse">
        <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="#">Link</a> 
              </li>
              <li><a href="#">Link</a> 
              </li>
              <li><a href="#">Link</a> 
              </li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span>

              </button>
              </span>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</nav>
<div class="container">
  <div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>

    </button> <strong>YUP!</strong>

  </div>
</div>

Hide result