ホーム » 個人掲示板 » アコーディオンメモー20181018
My Google+

アコーディオンメモー20181018

  • 技術三昧@2018-10-18 19:15:31

スポンサーリンク

<style>
.Accordion {
width: 100%;
border: 1px solid #ccc;
border-top: none;
}
.Accordion__menu {
height: auto;
}

.Accordion__MenuLabel {
height: 2rem;
line-height: 2rem;
font-size: 1.2rem;
padding: 0.4rem 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:checked ~ .Accordion__MenuLabel:after {
content: "-";
float: right;
box-sizing: border-box;
}
.Accordion__subMenuTrigger:not(:checked) ~ .Accordion__MenuLabel:hover:after {
content: "+";
float: right;
box-sizing: border-box;
}

.Accordion__subMenuTrigger {
display: none;
}

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

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

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

}


#demo-wrap {
width: 400px;
height: auto;
display: inline-block;
}
</style>
<div id="demo-wrap">
<!-- アコーディオン Start -->
<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>サブメニュー1</span>
</div>
<div class="Accordion__subMenu">
<span>サブメニュー2</span>
</div>
<div class="Accordion__subMenu">
<span>サブメニュー3</span>
</div>
<div class="Accordion__subMenu">
<span>サブメニュー4</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>
<!-- //アコーディオン END -->
</div>

0人

◎技術三昧掲示板で掲載した情報(リンク・リンク先を含む)に関して、掲示板管理者が確認や保証を行うことは一切ありません。
すべて利用者のモラルに委ねられおり、掲示板から張られたリンクに関するトラブルが生じても管理者側は免責とさせていただきます。

閉じる