Jasny offcanvas菜单

Question

我使用bootstrap和Jasny bootstrap（http://www.jasny.net/bootstrap/）。我正在尝试创建一个导航栏，像在android页面http://www.android.com/switch/上那样的画布菜单。最接近那个的Jasny菜单就是这个：http://www.jasny.net/bootstrap/examples/navmenu/。

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

提前多多感谢！

Answer 1

这应该可以帮助您入门。

set_x(self, x) method of matplotlib.text.Text instance
    Set the *x* position of the text

    ACCEPTS: float

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