päivittäin kukka

  • twitter
  • facebook
  • instaglam
  • rss

クリエイティブ

プラグインを使わないシンプルなアコーディオンメニューの作り方

プラグインを使わないシンプルなアコーディオンメニューの作り方

アコーディオンメニューのプラグインを探していてあまりシンプルで良さそうなモノが見当たらなかったので、プラグインを使わないシンプルなアコーディオンメニューを作ってみました。出来るだけソースはシンプルにしたいので、プラグインを使わなくても出来るものは自分で作りたいですね。

作り方は簡単です。まずjQueryを使うのでjquery.jsをhead内に読み込んでおきます。後でcssを使って装飾をするのでreset.cssも読み込んで置くとレイアウトが崩れません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="reset.css">

次に下記のようにhtmlのマークアップをします。.wrapはコンテンツの横の大きさを指定するのに使用しています。必要でなければ削除しても問題ありません。

<ul class="accordion_ul"><!-- accordion_ul -->
	<li>
		<div>
			<p><span class="wrap">Item1</span></p>
			<ul>
				<li><span class="wrap"><a href="">Item1-1</a></span></li>
				<li><span class="wrap"><a href="">Item1-2</a></span></li>
				<li><span class="wrap"><a href="">Item1-3</a></span></li>
			</ul>
		</div>
	</li>
	<li>
		<div>
			<p><span class="wrap">Item2</span></p>
			<ul>
				<li><span class="wrap"><a href="">Item2-1</a></span></li>
				<li><span class="wrap"><a href="">Item2-2</a></span></li>
				<li><span class="wrap"><a href="">Item2-3</a></span></li>
				<li><span class="wrap"><a href="">Item2-4</a></span></li>
			</ul>
		</div>
	</li>
	<li>
		<div>
			<p><span class="wrap">Item3</span></p>
			<ul>
				<li><span class="wrap"><a href="">Item3-1</a></span></li>
				<li><span class="wrap"><a href="">Item3-2</a></span></li>
				<li><span class="wrap"><a href="">Item3-3</a></span></li>
				<li><span class="wrap"><a href="">Item3-4</a></span></li>
				<li><span class="wrap"><a href="">Item3-5</a></span></li>
				<li><span class="wrap"><a href="">Item3-6</a></span></li>
			</ul>
		</div>
	</li>
</ul><!-- /accordion_ul -->

次にcssで装飾をします。矢印はCSSを使って作っているので画像を作る手間が省けます。marginの値を変更してアクティブ時に矢印を変更しています。

ul.accordion_ul {
	display: block;
	font-size: 14px;
	text-align: left;
	border-top: solid 1px #c0c0c0;	
}

div p {
    position: relative; 
    padding: 20px 15px;
    color: #4f5056;
    background-color: #f6f6f6;
    border-bottom: solid 1px #c0c0c0;
    cursor: pointer;  
}

p span.wrap, li span.wrap {
	position: relative;
	display: block;
	max-width: 320px;
	width: 100%;
	margin: 0 auto;
}

div p span.wrap:before {
  	position: absolute;
  	display: block;
  	content: "";
  	width: 12px;
  	height: 12px;
  	margin-top: -10px;
  	top: 50%;
  	right: 0;
  	-webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
  	background: #4f5056;
}

div p span.wrap:after {
  	position: absolute;
  	display: block;
  	content: "";
  	width: 12px;
  	height: 12px;
  	margin-top: -13px;
  	top: 50%;
  	right: 0;
  	-webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
  	background: #f6f6f6;
}

div p.active {
	color: white;
	background: #4f5056;
}

div p.active span.wrap:before {
  	margin-top: 0;
  	background: #f6f6f6;
}

div p.active span.wrap:after {
  	margin-top: 3px;
  	background: #4f5056;
}

div li {
    display: block;
    width: 100%;
    padding: 20px 0 20px 30px;
    background-color: #F2F2F2;
    border-bottom: solid 1px #c0c0c0; 
}

div li a {
    position: relative;
    display: block;
    text-decoration: none;
    color: #666666;
}

div li a:before{
  	position: absolute;
  	display: block;
  	content: "";
  	width: 12px;
  	height: 12px;
  	margin-top: -5px;
  	top: 50%;
  	right: 17px;
  	-webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
  	background: #4f5056;
}

div li a:after{
  	position: absolute;
  	display: block;
  	content: "";
  	width: 12px;
  	height: 12px;
  	margin-top: -5px;
  	top: 50%;
  	right: 20px;
  	-webkit-transform: rotate(45deg);
  	transform: rotate(45deg);
  	background: #F2F2F2;
}

最後にhead内のjquery.jsのスクリプトの下にプラグインを動かす為のスクリプトをセットします。ulの中身を非表示にしてpをクリックしたときにactiveというクラスを付けて、pに対して.slideToggleを実行するというような形です。

<script>
$('.accordion_ul ul').hide();
	$('.accordion_ul p').click(function(e){
   		$(this).toggleClass("active");
   		$(this).next("ul").slideToggle();
});
</script>

シンプルなアコーディオンメニューデモを用意しました。シンプルなのでさまざまな場面で応用して活用していけそうです。

下記の記事を参考にさせていただきました。

jQueryプラグインを使わずにアコーディオンメニューを作ろう | PlusTrick

今日もこのブログを見に来てくださってありがとうございます。
石の上にも三年、バランスボールを使い始めて三日が経ちました。

こちらの記事もよく読まれてます。