<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
      <span class="navbar-brand">Fullscreen Menu</span>

      <button class="btn btn-primary navbar-btn pull-right" data-toggle="collapse" data-target="#menu"><span class="fa fa-bars"></span> Menu</button>

  </div>
</div>

<!-- Menu -->
<div id="menu" class="panel panel-default panel-collapse collapse">
  <div class="container">
    <ul class="nav nav-pills nav-stacked">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </div>
</div>


<div class="container">

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Fullscreen Menu with Bootstrap</h1>
    <h2>Collapse Version</h2>
    <p>This example is a quick exercise to illustrate how we can quickly build a fullscreen menu using Bootstrap's Collapse plugin.</p>
    <p><strong>Important: CSS adjustments are in an embedded style sheet in this HTML file.</strong></p>
    <p>
      <a class="btn btn-lg btn-primary" href="https://getbootstrap.com/javascript/#collapse-usage" role="button">View collapse plugin docs &raquo;</a>

      <a class="btn btn-lg btn-default" href="https://codepen.io/davidcochran/pen/BLjwu">See the CodePen <span class="fa fa-arrow-circle-right"></span></a>
    </p>
  </div>

</div> <!-- /container -->
#menu {
  background: hsla(1,0%,100%,.9);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  min-height: 100%;
  padding-top: 80px;
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js