HTML浮动边栏/导航条

Question

我在用bootstrap3。话虽如此，我还是愿意用纯javascript或Jquery或任何其他类似的框架来实现我的需求。

我希望在页面的左边实现一个侧边栏。侧边栏必须是隐形的。然而，像图片这样的句柄显示可以点击的东西是必须的。当用户单击此句柄类型图像时，侧边需要浮出水面。侧边栏上将有许多选项，用户可以选择哪些选项可以作为页面内容的筛选器。完成工作后，如果用户单击侧边栏之外的任何地方，侧栏需要滑回它的位置。

我喜欢这里的例子-- http://startbootstrap.com/template-overviews/simple-sidebar/，它不浮动在现有内容之上，而是推送内容&也没有我想要的句柄类型的东西，而是使用一个按钮。

我能在这里寻求一些指导吗？

Answer 1

首先，jquery有几个不同的非画布菜单插件。这里有一个可能有用的jquery离开画布推送导航。或者您可以使用多个插件Jquery离开画布菜单查看此页面。

如果不想使用插件，可以使用非常小的jquery代码和一些css。首先，您需要创建一个菜单按钮和一个菜单，并给菜单一个负值，所以它是隐藏的。然后，您应该将主体内容包装在div中，以便在打开菜单时可以轻松地将其移到上面。然后，您只需要使用jquery toggleClass来切换主体以获得一个菜单类--单击按钮时打开导航链接，当菜单打开时单击主内容即可打开。

小提琴演示小提琴

以下是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;
}