CSSでアコーディオン式のメニューを実装_ブログ_zanmai.net

僕が運営している別のサイトで既に実装しましたが、メモ帳としてここでアコーディオン実現する方法を掲載します。
では、いつもの流れで、ソースコードを貼り付けます。コピペでイメージ確認してください。

<style>
.Accordion {
  max-width: 400px;
  border: 1px solid #ccc;
  border-top: none;
}
.Accordion__menu {
  
}

.Accordion__MenuLabel {
  height: 2rem;
  line-height: 1.8;
  font-size: 1.2rem;
  padding: 0.3rem 1rem;
  display: block;
  cursor: pointer;
  color: #222;
  background: #eee;
  border-top: 1px solid #ccc;
  transition: 0.6s;
}
.Accordion__MenuLabel:hover {
	background: blue;
	color: #FFF;
	font-weight: bold;
	opacity: 0.8;
}
.Accordion__subMenuTrigger:checked ~ .Accordion__MenuLabel {
	background: blue;
	font-weight: bolder;
	opacity: 1;
	color: #FFF;
}

.Accordion__subMenuTrigger {
  display: none;
}
.Accordion__subMenu {
  overflow: hidden;
  height: 0;
  transition: 0.6s;
}

.Accordion__subMenuTrigger:checked ~ .Accordion__subMenu {
  height: 2rem;
  padding-left: 1rem;
}

.Accordion__subMenuTrigger:checked ~ .Accordion__subMenu span {
	border-top: 1px solid #ccc;
}
.Accordion__subMenu span {
	width: 98%;
	margin: 0 auto;
	padding: 0.5rem 0;
	display: inline-block;
	float: right;
	border-top: none;
	height: 100%;
	font-size: 1rem;
	line-height: 100%;
	
}
.Accordion__subMenu span:hover {
	cursor: pointer;
	background: lightblue;
	color: #FFF;
}

</style>
<div class="Accordion">
  <div class="Accordion__menu">
    <input id="accordionMenuTrigger-1" name="accordion-1" type="radio" class="Accordion__subMenuTrigger" checked>
    <label for="accordionMenuTrigger-1" class="Accordion__MenuLabel">About us</label>
    <div class="Accordion__subMenu">
      <span>サブメニュー１</span>
    </div>
    <div class="Accordion__subMenu">
      	<span>サブメニュー２</span>
    </div>
        <div class="Accordion__subMenu">
      <span>サブメニュー３</span>
    </div>
        <div class="Accordion__subMenu">
      <span>サブメニュー４</span>
    </div>
  </div>
  
  <div class="Accordion__menu">
    <input id="accordionMenuTrigger-2" name="accordion-1" type="radio" class="Accordion__subMenuTrigger">
    <label for="accordionMenuTrigger-2" class="Accordion__MenuLabel">IT三昧</label>
    <div class="Accordion__subMenu">
      <span>デモを見る</span>
    </div>
    <div class="Accordion__subMenu">
      <span>記事を見る</span>
    </div>
    <div class="Accordion__subMenu">
      <span>そのたを見る</span>
    </div>
  </div>
  <div class="Accordion__menu">
    <input id="accordionMenuTrigger-3" name="accordion-1" type="radio" class="Accordion__subMenuTrigger">
    <label for="accordionMenuTrigger-3" class="Accordion__MenuLabel">メニュー3</label>
    <div class="Accordion__subMenu">
      <span>IT三昧について</span>
    </div>
    <div class="Accordion__subMenu">
      <span>サイトマップ</span>
    </div>
  </div>  
</div>