jquery - Jasny offcanvas 菜单

Question

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

我面临的问题是，当屏幕大于 992px 并且导航栏被隐藏时，关闭 Canvas 是可见的(固定的)。就像 android 网站一样，我希望导航栏始终与切换按钮一起出现，并且当单击切换按钮时(在所有屏幕尺寸上)然后出现关闭 Canvas 菜单(就像现在屏幕尺寸小于 992px 时一样) ).我怎样才能让导航栏和 Canvas 外的内容始终像在较小的屏幕尺寸上一样工作？

提前致谢!

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>