網頁設計教學：純CSS手風琴效果

berylgobby · 發表於 2019-5-29 10:49:00

文、前端小編

剛接觸CSS的你，對於Javascript還尚未有深刻的認識，要怎麼做出下面如圖所示的手風琴效果呢？

這個使用範圍相當廣又簡單方便的效果：手風琴效果，一般網站可以用在選單、產品分類，或是新聞公告…等等，就看網站開發者要怎麼運用。現在就跟著我們一步一步來完成吧！

要達成不用JS來完成這個效果，我們要使用label可以點選控制input[type=radio]這項特性，並且要注意label要對應到相對的input[type=radio]的id。

HTML：

<body>

</div>

</div>

</div>

</body>

設定簡單的CSS，基本的CSS reset，body的背景有點顏色，這樣看得比較清楚。

CSS：
* {       box-sizing : border-box;
}
body {
      margin : 0px;
      padding : 0px;
      background-color : #ecfaff;
}
.accordion  {
      width : 300px;
      margin : 80px auto 0;
}

接下來稍微將label做的比較像按鈕的樣子。

CSS：
.accordion label {
      display : block;
      width : 100%;
      text-align : center;
      border-radius : 5px;
      background-color : #ccc;
      margin-top : 10px;
      padding : 6px 12px;
      cursor : pointer;
}

然後在每一個input[type=radio]後面新增一塊div，class命名為content，並且設定CSS。

HTML：
<body>
      <div class="accordion">
         <label for="tab1">1號</label>
         <div class="box">
            <input type="radio" name="tab" id="tab1">
            <div class="content">hello</div>
         </div>
         <label for="tab2">2號</label>
         <div class="box">
            <input type="radio" name="tab" id="tab2">
            <div class="content">hello</div>
         </div>
         <label for="tab3">3號</label>
         <div class="box">
            <input type="radio" name="tab" id="tab3">
            <div class="content">hello</div>
         </div>
      </div>
</body>

CSS：

.content {
      height : 100px;
      background-color : #fff;
}

再來，我們要使用這次重要的偽元素【:checked】與選擇器【+】。【:checked】的功能為判定目前checkbox或radio是否有被選取，而【+】的功能是選擇緊鄰在後的下一個元素。

下面範例的意思就是: 被選取的input[type=radio]的下一個 .content 背景變成橘色。

CSS：

input[type=radio]:checked + .content {
      background-color : #fa0;
}

▍想知道接下來前端小編怎麼做嗎？咱們繼續看下去... ►我想觀看全文。

延伸閱讀
聯成電腦分享：早別人一步滿足對創意的無限渴望
聯成電腦網頁設計教學：8個簡單的CSS Hover效果
聯成電腦網頁設計小知識：為何不能使用中文命名檔案？
聯成電腦網頁設計教學：一次搞懂CSS3選擇器
聯成電腦網頁設計教學：一次讓你搞懂SASS

官方網站：http://www.lccnet.com.tw
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w

帳號		自動登錄	找回密碼
密碼			註冊