Question

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

我希望在页面的左侧实现一个侧边栏。侧边栏需要隐身。然而，像图片这样的句柄表明可以点击某些东西是必须的。当用户单击此句柄类型图像时，sideber需要浮出。侧边栏上会有一堆选项，用户可以选择这些选项，以便稍后作为页面内容的过滤器。完成工作后，如果用户点击侧边栏外的任何位置，侧边栏需要滑回到其位置。

我喜欢这里的示例 - http://startbootstrap.com/template-overviews/simple-sidebar/但是，它不会浮现在现有内容之上，而是推出内容和内容。也没有我所追求的句柄类型的东西，而是使用一个按钮。

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

Answer 1

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

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

小提琴演示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;
}

HTML浮动侧边栏/导航栏

1 个答案: