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

メモ20181019 アコーディオン最新

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

スポンサーリンク


<style>
.Accordion {
  width: 100%;
  border: 1px solid blue;
  border-radius: 2px;
  display: inline-blcok;
}
.Accordion__menu {
  height: auto;
}
.Accordion > .Accordion__menu:first-child .Accordion__MenuLabel {
	border-top: 0;
}

.Accordion__MenuLabel {
	height: 2rem;
	line-height: 2rem;
	font-size: 1.1rem;
	padding: 0.45rem 0.5rem;
	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;
	transform: scale(1.002);
}
.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;
	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__subMenu span:hover:after {
	content: "≫";
	float: right;
	box-sizing: border-box;
	margin-right: 0.5rem;
}

.Accordion__MenuLabel + .Accordion__subMenu span {
	border-top: 0px;
}


#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" type="radio" class="Accordion__subMenuTrigger" checked>
		<label for="accordionMenuTrigger-1" class="Accordion__MenuLabel">About 便利ジャパン</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" type="radio" class="Accordion__subMenuTrigger">
		<label for="accordionMenuTrigger-2" class="Accordion__MenuLabel">About 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" 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人

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

閉じる