Web-Gimmick Web制作と知識のメモ帳

レスポンシブ対応のオーソドックスな軽量アコーディオンの作り方。

スマホ対応においてのアコーディオンメニューほぼ必須の項目かも?
と思うほど頻繁に利用されますね。

スマホのみであればCSSだけで作るアコーディオンを使った方が軽量だとおもうのですが、
PCも使うとなると、IEへの配慮でCSSアコーディオンはまだ使いにくいイメージ。
今回はCSSでのカスタムも簡単なアコーディオンメニューです。

レスポンシブ対応のオーソドックスな軽量アコーディオンの作り方

レスポンシブ対応のアコーディオンのデモ。

はじめに今回作るアコーディオンがこれ。
CSSで調整してお好みにカスタマイズもしやすいハズ。

デモ

アコーディオンの設置コード

javascript

jQueryがいるのでダウンロードする。
アコーディオンに必要なスクリプトは数行でOK。

// ACCORDION
$(function() {
    function accordion() {
        $(this).toggleClass("active").next().slideToggle(300);
    }
    $(".accordion .toggle").click(accordion);
});

HTML

やけにソースが多いですが、繰り返してるだけです。

<div class="accordion">
	<ul>
		<li>
			<a class="toggle">メニュータイトル1</a>
			<ul>
				<li><a href="#">テスト1-1</a></li>
				<li><a href="#">テスト1-2</a></li>
				<li><a href="#">テスト1-3</a></li>
				<li><a href="#">テスト1-4</a></li>
			</ul>
		</li>
		<li>
			<a class="toggle">メニュータイトル2</a>
			<ul>
				<li><a href="#">テスト2-1</a></li>
				<li><a href="#">テスト2-2</a></li>
				<li><a href="#">テスト2-3</a></li>
				<li><a href="#">テスト2-4</a></li>
			</ul>
		</li>
		<li>
			<a class="toggle">メニュータイトル3</a>
			<ul>
				<li><a href="#">テスト3-1</a></li>
				<li><a href="#">テスト3-2</a></li>
				<li><a href="#">テスト3-3</a></li>
				<li><a href="#">テスト3-4</a></li>
			</ul>
		</li>
		<li>
			<a class="toggle">メニュータイトル4</a>
			<ul>
				<li><a href="#">テスト4-1</a></li>
				<li><a href="#">テスト4-2</a></li>
				<li><a href="#">テスト4-3</a></li>
				<li><a href="#">テスト4-4</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS

表示の変更はCSSを変更して調整。

/*ACCORDION*/
div.accordion {
	width: 100%;
}
div.accordion > ul > li > a {
	display: block;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
	background-color: #6ab5c8;
	border-bottom: 1px solid #fff;
	cursor: pointer;
	padding: 10px 12px;
	position: relative;
}
div.accordion > ul > li > a:hover{
	background-color: #5997a7;
}
div.accordion > ul > li > a:after, div.accordion > ul > li > a.active:after{
	font-size: 12px;
	position: absolute;
	right: 12px;
	top: 16px;
	color: #2f7f99;
}
div.accordion > ul > li > a:after{
	content: "▼";
}
div.accordion > ul > li > a.active:after{
	content: "▲";
}
div.accordion > ul > li > ul {
	display: none;
}
div.accordion > ul > li > ul > li > a{
	display: block;
	color: #fff;
	font-size: 14px;
	background-color: #79c9b8;
	border-bottom: 1px solid #fff;
	padding: 6px 12px;
	position: relative;
}
div.accordion > ul > li > ul > li > a:hover{
	background-color: #67ab9c;
}

CSSで調整する際の簡単な説明

・矢印を変更するには以下の2行を変更。

div.accordion > ul > li > a:after{content: "▼";}
div.accordion > ul > li > a.active:after{content: "▲";}

・矢印の位置を変更するにはtopとrightの数値を変更。

div.accordion > ul > li > a:after, div.accordion > ul > li > a.active:after{
	font-size: 12px;
	position: absolute;
	right: 12px;
	top: 16px;
	color: #2f7f99;
}

後はCSSで変更してもらえれば自由にカスタマイズ可能かと思います。
レスポンシブ対応アコーディオンでした。

関連する記事はこちら

コメントをどうぞ

サイト内検索

Copyright ShitteLog All rights reserved.