angularjs - 带有 Bootstrap 的容器中的 Canvas 菜单

Question

我正在尝试构建一个像 www.bikepacking.com 上那样的“非 Canvas 菜单”，但我很难在容器中使用它。

我将 Bootstrap 与 QuantumUI 结合使用，没有 jQuery。

我的做法是这样的:

<div class="container wrapper">

  <rw-navigation>

  </rw-navigation>

  <div class="brandbar">
    <input type="checkbox" id="nav-trigger" class="nav-trigger"/>
    <label for="nav-trigger"></label>
  </div>

  <div class="content">
    <header>

    </header>

    <div ui-view=""></div>

    <footer>
      <p>&copy; 2015 {{'footer.copyright' | translate}}</p>
    </footer>
  </div>
</div> 

像这样的一些样式:

div.container.wrapper{
  position: relative;
  overflow: hidden;
  .navigation{
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 256px;
    @include transition(left, 0.5s, ease);
    background: #111;
    color: white;
  }
  .brandbar{
    position:absolute;
    top: 50px;
    left:0;
    @include transition(left, 0.5s, ease);
  }
  .content {
    overflow: hidden;
    position: relative;
    width: auto;
    bottom: 100%;
    left: 0;
  }
}

.navigation 类在 rwNavigation 指令的模板中应用 replace: true。

它不起作用，我也不知道为什么。

Answer 1

好的，

现在我有一些时间来解决这个问题。

本教程的 THX@ Sitepoint 给了我正确的方向:

http://www.sitepoint.com/pure-css-off-screen-navigation-menu/

但我必须将 position:fixed 的形式更改为 position:absolute，因为 position:fixed 仅引用窗口和 position:absolute 引用 prant position:relative 元素(如果没有父 position:relative 元素，则为 windows)

这是一个 plnkr，它包含盒装 Canvas 菜单的解决方案

http://plnkr.co/edit/OdkXXkhGzKLd0qi2RZ4h?p=preview