Jasny 画布菜单

Question

我将 bootstrap 与 Jasny bootstrap (http://www.jasny.net/bootstrap/) 一起使用。我正在尝试创建一个导航栏，关闭画布菜单，就像 android 页面 http://www.android.com/switch/ 上的菜单一样。最接近该菜单的 Jasny 菜单是这个：http://www.jasny.net/bootstrap/examples/navmenu/。

我面临的问题是当屏幕大于 992px 并且导航栏被隐藏时，off canvas 是可见的（固定的）。像android网站一样，我希望导航栏始终与切换按钮一起出现，并且当单击切换按钮（在所有屏幕尺寸上）时，会出现关闭画布菜单（就像现在屏幕尺寸小于992px时一样）。如何让导航栏和画布外始终像在较小的屏幕尺寸上一样工作？

提前非常感谢！

Answer 1

这应该可以帮助您入门。

$(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>