如何创建仅包含HTML5和CSS3的可扩展菜单?
我想只显示4个菜单项和一个查看所有列表项,其中点击查看全部应该展开所有列表项。
答案 0 :(得分:7)
有几种方法可以做到!例如以下内容。 HTML看起来像这样。有一个div,你单击,下面的div将展开。这只能通过伪选择器:target。
实现<div class="accordion">
<div id="one" class="section">
<h3>
<a href="#one">Heading 1</a>
</h3>
<div>
<p>Content</p>
</div>
</div>
<div id="two" class="section">
<h3>
<a href="#two">Heading 2</a>
</h3>
<div>
<p>Content</p>
</div>
</div>
</div>
.accordion h3 + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion :target h3 + div {
height: 100px;
}
.accordion .section.large:target h3 + div {
overflow: auto;
}
我为你做了一个工作小提琴。看看它:Check me out!
答案 1 :(得分:0)