将汉堡菜单（从右侧滑入）与手风琴式菜单相结合答案

【问题标题】：Combining a hamburger menu (sliding in from right) with an accordion style menu将汉堡菜单（从右侧滑入）与手风琴式菜单相结合
【发布时间】：2021-08-01 11:26:06
【问题描述】：

我正在尝试创建一个菜单，将某个汉堡菜单的操作与某个手风琴菜单的操作相结合。特别是，我有兴趣组合以下 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

如果有人能给我指明正确的方向，我将不胜感激。谢谢。

【问题讨论】：

标签： css menu accordion

【解决方案1】：

谢谢大家。我想我想通了。这是解决方案：

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, 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="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, 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>


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

但现在是另一个问题。如何防止滚动条稍后出现，这对我来说似乎有点跳跃？（我想，接下来的问题是如何制作全高度滑入的原始菜单，这样就不需要滚动条了？）谢谢。

【讨论】：

我也回答了我的第二个问题。解决方案在这里：jsfiddle.net/qgud9730 我在 CSS 的正文部分添加了以下内容：溢出：隐藏；谢谢。