Jasny offcanvas menu

Question

I'm using bootstrap together with Jasny bootstrap (http://www.jasny.net/bootstrap/). I am trying to create a navbar, off canvas menu like the one on the android page http://www.android.com/switch/. The Jasny menu closest to that one is this one: http://www.jasny.net/bootstrap/examples/navmenu/.

The problem I face is that the off canvas is visible (fixed) when the screen is larger than 992px and the navbar is hidden. Like the android website I want the navbar to always be present with the toggle button, and when the toggle button is clicked (on all screen sizes) then the off canvas menu appears (just like it does now when the screen size is less than 992px). How can I have the navbar and off canvas working like on the smaller screen sizes at all times?

Thanks a lot in advance!

Answer 1

This should help you get started.

$(document).ready(function() {
  var open = false;

  var openSidebar = function() {
    $('.side-collapse').addClass('open-side');
    $('.navbar-toggle').addClass('open-side');
    $('#navbar-toggle').addClass('open-side');
    open = true;
  }

  var closeSidebar = function() {
    $('.side-collapse').removeClass('open-side');
    $('.navbar-toggle').removeClass('open-side');
    $('#navbar-toggle').removeClass('open-side');
    open = false;
  }

  $('.navbar-toggle').click(function(event) {
    event.stopPropagation();
    var toggle = open ? closeSidebar : openSidebar;
    toggle();
  });

  $(document).click(function(event) {
    if (!$(event.target).closest('.side-collapse').length) {
      closeSidebar();
    }
  });
});

body {
  padding-top: 60px;
}
.navbar.navbar-custom {
  background: #fff;
  border: none;
}
.navbar-custom .navbar-toggle {
  border: none;
  float: left;
}
.navbar-custom .navbar-header .navbar-toggle:hover,
.navbar-custom .navbar-header .navbar-toggle:focus,
.navbar-custom .navbar-header .navbar-toggle:active {
  border-radius: 0;
  background: #6ab344;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.navbar-custom .navbar-nav > li:first-child {
  background: #6ab344;
  font-size: 25px;
  font-weight: 600;
}
.navbar-custom .navbar-nav > li:first-child a {
  color: #fff;
}
.navbar-custom .navbar-nav > li,
.navbar-custom .navbar-nav > li > a {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.navbar-custom .navbar-nav > li:hover {
  background: #A3D48A;
}
.navbar-custom .navbar-nav > li > a:hover {
  border-right: 6px solid #6ab344;
  color: #fff;
}
.navbar-custom .side-collapse {
  background: #fff;
  border-right: 2px solid #f5f5f5;
  top: 50px;
  bottom: 0;
  left: -256px;
  width: 256px;
  position: fixed;
  overflow: hidden;
  -webkit-transition: all 0.4s cubic-bezier(1, .25, .005, 1.1);
  transition: all 0.4s cubic-bezier(1, .25, .005, 1.1);
}
.navbar-custom .side-collapse.open-side {
  left: 0;
}
.alert.alert-success-alert {
  background: #6ab344;
  color: #fff;
  border-radius: 0;
}
.alert-success-alert button.close {
  color: #fff !important;
}
@media (min-width: 767px) {
  .navbar-custom .side-collapse {
    top: 0px;
  }
  .navbar-custom .navbar-toggle {
    display: block;
  }
  .navbar-custom .side-collapse .navbar-nav > li > a {
    width: 256px;
    display: block;
  }
}

<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-fixed-top navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header" id="navbar-toggle">
      <button type="button" class="navbar-toggle"><span class="sr-only">Toggle navigation</span>  <span class="glyphicon glyphicon-align-right"></span>

      </button><a class="navbar-brand" href="#">Bootstrap</a>

    </div>
    <div class="navbar-default side-collapse">
      <nav role="navigation" class="navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Bootstrap <span class="sr-only">(current)</span></a> 
          </li>
          <li><a href="#">About</a> 
          </li>
          <li><a href="#">Services</a> 
          </li>
          <li><a href="#">News</a> 
          </li>
          <li><a href="#">Contact</a> 
          </li>
        </ul>
      </nav>
    </div>
  </div>
</nav>
<div class="container">
  <div class="alert alert-success-alert alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>

    </button> <strong>Warning!</strong> This is an Off-Canvas Mobile Menu</div>
  <dl> <dt>Bootstrap...</dt>

    <dd>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de
      antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos
      del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por C icero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría
      de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd>
  </dl>
  <dl> <dt>Bootstrap...</dt>

    <dd>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de
      antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos
      del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por C icero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría
      de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd>
  </dl>
  <dl> <dt>Bootstrap...</dt>

    <dd>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de
      antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos
      del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por C icero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría
      de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd>
  </dl>
  <dl> <dt>Bootstrap...</dt>

    <dd>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de
      antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos
      del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por C icero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría
      de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd>
  </dl>
  <dl> <dt>Bootstrap...</dt>

    <dd>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de
      antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos
      del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por C icero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría
      de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd>
  </dl>
</div>