问题描述
我正在尝试创建一个菜单,将某个汉堡包菜单的操作与某个手风琴菜单的操作相结合。特别是,我对组合以下 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>
但是现在另一个问题。如何防止滚动条稍后出现,这对我来说似乎有点跳动? (我想,那么问题将是我如何制作以全高滑入的原始菜单,因此不需要滚动条?)谢谢。