CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
inertia
inertia

Reputation: 4127

Collapse bootstrap side bar

I've searching stackoverflow for quite a while now but still can't find the answer.

Is there any way for a navigation bar to collapse to the side using bootstrap? What I mean is you normally have horizontal navigation bar then when shrunk, it comes out from the side instead of dropping from top to bottom when a button is clicked. Does that make sense? I'm sorry I'm butchering this but it's kind of hard to explain.

Thanks for your help.

Upvotes: 5

Views: 4450

Answers (1)

vanburen
vanburen

Reputation: 21663

This can probably give you a base to start with if nothing else.

This uses it's own data-attribute to replace the default data-toggle="collapse" and the rest is just converting the navigation into a sidebar when the viewport is under 768px. The nav links are wrapped in <div class="navbar-default side-collapse open"> which adds the needed CSS for the sidebar and replaces the elements that would normally appear with the default classes.

Compare this example to the default in the Docs to see the changes.

See working example 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>

Upvotes: 4

Related Questions