読者です 読者をやめる 読者になる 読者になる

トリカ+BLOG

web制作に関するメモから、ご当地グルメなど色々書く予定。

Javascript無しでアコーディオンメニューを作ろう

f:id:ntrl0124:20161129105811p:plain
JSを使いたくないときのやり方。inputやlabelを使います。


WordPressのページ内にアコーディオンメニューを置いてほしいという依頼でした。
JSならslideToggleとか使えばすぐに実装できますが、
新たにJSを読み込む記述を加える等はWPではちょっと面倒。クライアントも管理がややこしい!
……というわけで、html&cssのみでアコーディオンメニューを作るやり方を探しました。

***参考ページ

qiita.com

大体上記サイトを読めば分かるので、割愛します(ぇ

今回は開閉ボタンが「+」「-」と変化するようにしたかったので、
こんな感じにラベルの疑似要素を使いました。

.chair_menu .chair_blt01:after,
.chair_menu .chair_blt02:after{
	content:"+";
}
.chair_menu :checked+.chair_blt01:after,
.chair_menu :checked+.chair_blt02:after{
	content:"-";
}

***デモ

中身

中身

html:
<div class="chair_menu">
 <input type="checkbox" id="menu_bar01" class="accordion" />
 <label for="menu_bar01" class="chair_blt chair_blt01">メニュー1</label>
 <div class="accordion_box">
  <p>中身</p>
 </div>
 <input type="checkbox" id="menu_bar02" class="accordion" />
 <label for="menu_bar02" class="chair_blt chair_blt02">メニュー2</label>
 <div class="accordion_box">
  <p>中身</p>
 </div>
</div>
CSS
.chair_menu {
	margin-bottom: 20px;
}
.chair_menu input {
    display: none;
}
.chair_menu .chair_blt{
	display: block;
	position: relative;
	height: 50px;
	margin: 5px 0 0;
	padding: 0 20px;
	line-height: 50px;
	cursor: pointer;
	box-sizing: border-box;
}
.chair_menu .chair_blt01,.chair_menu .chair_box01{
	background-color: #f79646;
}
.chair_menu .chair_blt02,.chair_menu .chair_box02{
	background-color: #9bbb59;
}
.chair_menu .chair_blt:after{
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 0;
	bottom: 0;
	right: 20px;
	margin: auto;
	text-align: center;
	line-height: 30px;
	font-size: 120%;
	font-weight: bold;
	background-color: #ffffff;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
}
.chair_menu .chair_blt01:after{
	color: #f79646;
}
.chair_menu .chair_blt02:after{
	color: #9bbb59;
}
.chair_menu .chair_blt01:after,
.chair_menu .chair_blt02:after{
	content:"+";
}
.chair_menu :checked+.chair_blt01:after,
.chair_menu :checked+.chair_blt02:after{
	content:"-";
}
.chair_menu .accordion_box{
    max-height: 0;
    background: #f6f4e6;
    overflow-y: hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.chair_menu #menu_bar01:checked+.chair_blt+.accordion_box,
.chair_menu #menu_bar02:checked+.chair_blt+.accordion_box{
    max-height: 500px;
    opacity: 1;
}
余談。

今回、pタグや改行が勝手に入るままになっていたサイトだったので、
勝手に入られるとcssの兄弟要素を指定しているので、まあ動かない動かない……
他ページに影響があるので、迂闊にphpも弄れないし…とすごく困りました。

解決策は、

①改行は全部詰める。(読みづらい…)
②labelなどのインライン要素でpタグなどブロック要素を囲わない
③勝手にpタグで囲われる前にdivタグで囲ってしまえ!

でした。(覚え書きです。参考になるかはわかりません。)

私がWordPressでサイト立ち上げるときは、最初から止めよう(教訓)

広告を非表示にする