css:汉堡包菜单应该单独滚动

Question

以下是plunker链接：http://plnkr.co/edit/peQEGK4mNiPBqlknrO6V?p=preview

当页面加载汉堡菜单应该关闭，当我们点击图标时，它应该打开并单独滚动。

我不想使用hamburger.js。如果没有它，如何实现这个功能。

代码：

 <div id="navBar">
<nav id="nav" class="side-nav">
    <!--<ul>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>
        <li><a href="#">menuitem 1</a></li>
        <li><a href="#">menuitem 2</a></li>
        <li><a href="#">menuitem 3</a></li>
        <li><a href="#">menuitem 4</a></li>
        <li><a href="#">menuitem 5</a></li>
        <li><a href="#">menuitem 6</a></li>-->
        <ul id="nav-contain" aria-live="polite" title="navigation menu" tabindex="-1">
     <li class="menu-home main-menu closed">
        <a href="#"  >
           <p >Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed" >
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed" >
        <a href="javascript:void(0);" >
           <p>Menu</p>
        </a>
        <ul class="expand" >
           <li class="main-menu" >
              <a href="#">
                 <p>Menu</p>
              </a>
           </li>
  </ul>
  </li>
  <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
     <li class="main-menu closed">
        <a href="#" >
           <p>Menu Level 1</p>
        </a>
     </li>
  </ul>
</nav>
</div>

css中出现了什么问题。

Answer 1

我创建了库BlackTie.js，它正是您所需要的！

---

如何使用

你可以通过在你的身体标签中添加以下代码来添加汉堡菜单：

<ul id="ham-menu">
    <li class="ham-item"><a href="#">Item one</a></li>
    <li class="ham-item"><a href="#">Item two</a></li>
    <li class="ham-item"><a href="#">Item three</a></li>
    <li class="ham-item"><a href="#">Item four</a></li>
</ul>

所有其他元素都必须位于这个ul标签下面的容器div元素下：

<div id="container">
    ...
    //app body content goes here
    ...
</div>

有关更多信息，请参阅官方文档。