在带有引导程序的容器中的画布菜单

Question

我正试图在www.bikepacking.com上建立一个“画布菜单”， 但我正在努力在容器中使用它。

我使用带有QuantumUI的Bootstrap和带有 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/

BUt我必须将表单position:fixed更改为position:absolute，因为position:fixed仅引用窗口而position:absolute引用prant position:relative元素（或窗口）如果没有父postion:relative元素）

这是一个带有盒装画布菜单解决方案的plnkr

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