将汉堡包菜单从右侧滑入与手风琴式菜单相结合

如何解决将汉堡包菜单从右侧滑入与手风琴式菜单相结合

我正在尝试创建一个菜单，将某个汉堡包菜单的操作与某个手风琴菜单的操作相结合。特别是，我对组合以下 2 个菜单很感兴趣：https://codepen.io/facebookads__/pen/rNWNvee 和 https://jsfiddle.net/esedic/oza6v6px/（其中手风琴菜单中的文本（和悬停属性）将替换汉堡包中 4 个项目的简单列表菜单）。过去几天一直在做 2 的“混搭”，但不幸的是，我的 CSS/HTML/Javascript 知识处于非常基本的水平。

例如，我尝试替换汉堡包菜单中的列表项（

）（下方）

<body>
    <nav role='navigation'>
        <div id="menuToggle">
            <input type="checkBox" />
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="#">
                    <li>Home</li>
                </a>
                <a href="#">
                    <li>Portfolio</li>
                </a>
                <a href="#">
                    <li>About</li>
                </a>
                <a href="#">
                    <li>Contact</li>
                </a>
            </ul>
        </div>
    </nav>
</body>

在手风琴菜单中包含整个 html

如果有人能让我朝着正确的方向前进，我将不胜感激。谢谢。

解决方法

谢谢大家。我想我想通了。解决办法如下：

https://jsfiddle.net/zce9j78x/

<body>
    <nav role='navigation'>
        <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="#">
                    <li></li>
          
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>


</ul>
        </div>
    </nav>
</body>

但是现在另一个问题。如何防止滚动条稍后出现，这对我来说似乎有点跳动？（我想，那么问题将是我如何制作以全高滑入的原始菜单，因此不需要滚动条？）谢谢。