javascript - HTML float 侧边栏/导航栏

Question

我正在使用 bootstrap3。话虽如此，我愿意在纯 javascript 或 Jquery 或任何其他类似框架中实现我的要求。

我希望在页面左侧实现一个侧边栏。侧边栏需要不可见。然而，必须有一个类似图片的 handle 来显示可以单击的东西。当用户单击此 handle 类型图像时，sideber 需要浮出。侧边栏上有很多选项，用户可以选择这些选项，这些选项稍后将充当页面内容的过滤器。工作完成后，如果用户单击侧边栏之外的任何位置，侧边栏需要滑回其位置。

我喜欢这里的例子 - http://startbootstrap.com/template-overviews/simple-sidebar/但是，它不会漂浮在现有内容之上，而是推出内容，并且也没有我想要的 handle 类型的东西，而是使用按钮。

我可以在这里请求一些指导吗？

Answer 1

首先，有几个不同的 jquery Canvas 外菜单插件。这是一个可能有帮助的jquery off canvas push navigation 。或者您可以查看此页面的多个插件 Jquery off canvas menus .

如果您不想使用插件，您可以使用非常小的 jquery 代码和一些 css 来完成此操作。首先，您需要创建一个菜单按钮和一个菜单，并为菜单提供负边距，以便将其隐藏。然后，您应该将正文内容包装在 div 中，以便在菜单打开时可以轻松地将其移动。然后，您只需要使用 jquerytoggleClass 来切换主体，以在单击按钮时打开菜单类，单击导航链接，在打开菜单时单击主要内容。

fiddle 演示 Fiddle

这是 jquery:

$( document ).on( "click", ".menu-button, .menu ul li a, .menu-open .content-wrapper", function() {
    $( 'body' ).toggleClass( "menu-open" );
});

HTML:

<div class="menu-button">
  <span class="menu-layer first"></span>
  <span class="menu-layer second"></span>
  <span class="menu-layer third"></span>
</div>
<nav class="menu">
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>
<div class="content-wrapper">
  <h1>Body Content</h1>
  <p>Here is you main content</p>
</div>

还有CSS:

body{
  overflow-x: hidden;
}
.menu{
  width: 300px;
  height: 100%;
  position: fixed;
  left: -300px;
  top: 0;
  background: #000;
  z-index: 99;
  -ms-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
.menu ul{
  list-style-type:none;
  padding: 0;
  margin: 0;
}
.menu ul li{
  width: 100%;
  margin: 1px 0;
}
.menu ul li a {
  width: 100%;
  display: block;
  padding: 15px;
  background: #111;
  color: #fff;
  font-size: 16px;
}
.content-wrapper {
  padding: 20px;
  padding-top: 80px;
  width: 100%;
  min-height: 100vh;
  -ms-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
/*menu button styles*/
.menu-button { 
  width: 100px;
  height:75px;
  text-align:center;
  position:fixed;
  left:0;
  top:0;
  z-index: 99;
  background: #111;
  -ms-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
.menu-button:hover {
  cursor:pointer;
  cursor: hand;
}
.menu-button .menu-layer {
  border-radius: 1px;
  display: block;
  height: 1px;
  position: absolute;
  width:50%;
  left:25%;
  background:#fff;
  -ms-transition: all 300ms ease-in-out;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}
.menu-button .menu-layer.first { top: 25%;}
.menu-button:hover .menu-layer.first {top:30%; }
.menu-open .menu-button .menu-layer.first { 
  top: 50%;
  left: 35%;
  width:30%;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-button .menu-layer.second { top: 45%;}
.menu-open .menu-button .menu-layer.second {
  opacity: 0;
  left: 0;
}
.menu-button .menu-layer.third { top: 67%;}
.menu-button:hover .menu-layer.third {top:62%; }
.menu-open .menu-button .menu-layer.third { 
  top: 50%;
  left: 35%;
  width:30%;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/*menu open styles */
.menu-open .menu{
  left: 0;
}
.menu-open .menu-button {
  left: 300px;
}
.menu-open .content-wrapper {
  margin-left: 300px;
}