纯CSS手风琴导航菜单展开显示文本段落

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需要导入一个图标字体库font-awesome，然后设置好页面元素的样式，代码如下：

@import url("css/font-awesome.css");
* {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font: 16px/1 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  color: #555;
  background: #e5e5e5;
}

body {
  padding: 50px;
}

.togglebox {
  width: 400px;
  margin: 0 auto;
  background: #fff;
  transform: translateZ(0);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

input[type="radio"] {
  position: absolute;
  opacity: 0;
}

label {
  position: relative;
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 700;
  border-top: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

label[for*='1'] {
  border: 0;
}

label:after {
  content: '\f078';
  position: absolute;
  top: 0px;
  right: 20px;
  font-family: fontawesome;
  transform: rotate(90deg);
  transition: .3s transform;
}

section {
  height: 0;
  transition: .3s all;
  overflow: hidden;
}

#toggle1:checked ~ label[for*='1']:after,
#toggle2:checked ~ label[for*='2']:after,
#toggle3:checked ~ label[for*='3']:after,
#toggle4:checked ~ label[for*='4']:after {
  transform: rotate(0deg);
}

#toggle1:checked ~ #content1,
#toggle2:checked ~ #content2,
#toggle3:checked ~ #content3,
#toggle4:checked ~ #content4 {
  height: auto;
}

p {
  margin: 15px 0;
  padding: 0 20px;
  font-size: 12px;
  line-height: 1.5;
}

页面的body部分，多个radio类型的input作为单选框，后面通过label设置菜单文字，紧接着把需要显示的文本段落放入section标签里面，重复四次即可，代码如下：

<div class="togglebox">
  <input id="toggle1" type="radio" name="toggle" />
  <label for="toggle1">要求</label>
  <section id="content1">
    <p>第一个阶段，是做出要求，对宇宙发出指令，让宇宙了解你想要些什么，宇宙就会自动回应你的想法。</p>
    <p>这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
  </section>
  <input id="toggle2" type="radio" name="toggle" />
  <label for="toggle2">信念</label>
  <section id="content2">
    <p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念，就是我的说法，要相信还没有实现的事，“你的愿望就是我的命令”，宇宙就会开始运作安排，从而满足你心中的愿望。</p>
    <p>大多数的时候，假如我们要求的事物没有出现在生活中，我们会感到沮丧和失望，我们甚至会开始怀疑，这种怀疑会让人感到心灰意冷。接受这个感觉，然后用坚定的信念代替它：“我知道……我知道……我知道……，它就要实现了。”</p>
  </section>
  <input id="toggle3" type="radio" name="toggle" />
  <label for="toggle3">接受</label>
  <section id="content3">
    <p>第三步，就是这个过程最后一步，接受。开始感觉好极了，想想要是你想要的事物已经出现，那会是什么感觉。</p>
    <p>当你感觉好的时候，你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事，帮助自己具有拥有它们的感觉。无论你能做什么，只要去做，就有助于把这些东西吸引过来。</p>
  </section>
  <input id="toggle4" type="radio" name="toggle" />
  <label for="toggle4">实现</label>
  <section id="content4">
    <p>当你看到结果的时候，自己都会觉得大吃一惊的！</p>
    <p>真心想什么，一直想着并拥有那种感觉，就能让想法成真。试试看，先定一个小目标吧！</p>
  </section>
</div>