HOME > コラム > jQuery/JS Chips > 開閉によってアイコンを切り替える「アコーディオンメニュー」

開閉によってアイコンを切り替える「アコーディオンメニュー」

コラム

今回は、jQueryを活用したチップス的な開閉によってアイコンを切り替えるアコーディオンメニューを紹介したいと思います。
jQueryプラグインと言えばプラグインですが、非常に簡単に記述している程度のJavaScriptのチップスと言ったところです。
というのも、最近、コンテンツやサイトを制作することが多いのですが、その時によく使うモノだったのでメモ代わりに残しておこうと思った次第です。
「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

開閉によってアイコンを切り替える「アコーディオンメニュー」

開閉式のアコーディオンメニュー

今回紹介するjQueryプラグインは、日本の方が記述したソースです。
同様のjQueryプラグインを使うことが多い今日この頃なので、使いやすそうな開閉式で尚且つリストアイコンを切り替えることが出来るアコーディオンメニューを探したところ出会いました。

非常に簡潔に書かれているので、組み込むのが非常に楽でした。
大きなサイトで使う場合、デザイン的にこのまま使うと脆弱な感じがしますが、クオリティや技術レベルを求めない動作で良ければ十分に使うことが出来るプラグインです。

”チップス”という言葉が物凄くマッチするので、是非とも使いまわせるようになりたいところかもしれません。

ということで、ポイントを洗い出したいと思いますので、どうぞ宜しくお願いします。

参考サイト

以下のブログ記事を参考にさせて頂きました。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_ac_160905.zip
組み込み済みサンプル

サンプルです。

サンプルには、トップページにのみ、コンテンツを追記しています。
ちょっと使える状態にしていますので、是非使ってみてください。

元になるWEBサイトテンプレート（PHP）について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

ポイント
読み込ませているjQueryファイル

jQueryファイルは、以下のファイルを読み込ませています。 

http://code.jquery.com/jquery-1.11.3.min.js
ヘッダ内に組み入れたhtml

ヘッダ内に組み入れたhtmlソースです。 

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />

<style>
.top_menu_box_menu {
	display: none;
}
</style>
<script type="text/javascript">
$(function(){
$('.top_menu').on('click' , '.top_menu_box_ttl' , function(e){
e.preventDefault();

// 現在のアイコン状態で＋にするか−にするか判定
if($(this).children('i').is('.fa-minus')){

// ＋アイコンに変更
$(this).children('i')
.removeClass()
.addClass('fa fa-plus');
}else{

// −アイコンに変更
$(this).children('i')
.removeClass()
.addClass('fa fa-minus');
}
// クリックしたリストの開閉
$(this)
.next('.top_menu_box_menu')
.slideToggle();
});
});
</script>
トップページに組み入れたhtml

トップページに組み入れたhtmlソースです。 

<div class="topmain">
<div class="topmain-ttl"><h3>あなたが決めるコンテンツです</h3></div>

<div class="top_menu">

<div class="top_menu_l">

<div class="top_menu_box">
<div class="top_menu_box_w">
<div class="top_menu_box_ttl"><h3>タイトル</h3><i class="fa fa-plus"></i></div>
<div class="top_menu_box_menu">
<ul>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
</ul>
</div>
</div>
</div>
<div class="top_menu_box">
<div class="top_menu_box_w">
<div class="top_menu_box_ttl"><h3>タイトル</h3><i class="fa fa-plus"></i></div>
<div class="top_menu_box_menu">
<ul>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
</ul>
</div>
</div>
</div>

</div>

<div class="top_menu_r">

<div class="top_menu_box">
<div class="top_menu_box_w">
<div class="top_menu_box_ttl"><h3>タイトル</h3><i class="fa fa-plus"></i></div>
<div class="top_menu_box_menu">
<ul>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
</ul>
</div>
</div>
</div>
<div class="top_menu_box">
<div class="top_menu_box_w">
<div class="top_menu_box_ttl"><h3>タイトル</h3><i class="fa fa-plus"></i></div>
<div class="top_menu_box_menu">
<ul>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
<li><a href="/">メニュー名</a></li>
</ul>
</div>
</div>
</div>

</div>

</div>

</div>
追記したCSSファイルの内容

各種 top.css （3種類の top.css ）にそれぞれ以下の記述を追記しました。
レスポンシブ対応の記述を含んでいます。

まず、PC用の” top.css ”に追記した内容です。 

/******************************************
 トップページのメニュー用CSS
******************************************/

.top_menu {
	width: 1000px;
	margin: 0 auto;
}

.top_menu:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


.top_menu_l {
	width: 500px;
	float: left;
}

.top_menu_r {
	width: 500px;
	float: right;
}



.top_menu_box {
	width: 496px;
	margin: 0 auto;
	margin-bottom: 40px;
}


.top_menu_box_w {
	width: 400px;
	margin: 0 auto;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: none;
	background-color: #ff0033;
	padding-bottom: 1px;
}

.top_menu_box_ttl {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}

.top_menu_box_ttl:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.top_menu_box_ttl h3 {
	color: #fff;
	font-weight: bold;
	float: left;
	padding-left: 10px;
}


.top_menu_box_ttl i {
	display: block;
	float: right;
	text-align: right;
	color: #fff;
	padding-right: 10px;
	padding-top: 5px;
}

.top_menu_box_menu {
	width: 398px;
	margin: 0 auto;
	background-color: #fff;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}

.top_menu_box_menu ul {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}

.top_menu_box_menu ul li {
	text-align: left;
	font-size: 18px;
}

.top_menu_box_menu ul li a {
	display: block;
	background-image: url(/img/topmenuicon.png);
	background-repeat: no-repeat;
	background-position: 7px center;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
}

.top_menu_box_menu ul li a:hover {
	
}

.top_menu_box_menu ul li:last-child a {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}

次にスマホ用の” top.css ”に追記した内容です。 

/******************************************
 トップページのメニュー用CSS
******************************************/

.top_menu {
	width: 100%;
	margin: 0 auto;
}

.top_menu:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.top_menu_l {
	width: 49%;
	float: left;
}

.top_menu_r {
	width: 49%;
	float: right;
}


.top_menu_box {
	width: 100%;
	clear: both;
	margin-bottom: 20px;
}

.top_menu_box_w {
	width: 98%;
	margin: 0 auto;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid #ff0033;
}

.top_menu_box_ttl {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #ff0033;
}

.top_menu_box_ttl:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.top_menu_box_ttl h3 {
	color: #fff;
	font-weight: bold;
	float: left;
	padding-left: 10px;
}


.top_menu_box_ttl i {
	display: block;
	float: right;
	text-align: right;
	color: #fff;
	padding-right: 10px;
	padding-top: 5px;
}

.top_menu_box_menu {
	width: 99%;
	margin: 0 auto;
	background-color: #fff;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}

.top_menu_box_menu ul {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}

.top_menu_box_menu ul li {
	text-align: left;
	font-size: 18px;
}

.top_menu_box_menu ul li a {
	display: block;
	background-image: url(/img/topmenuicon.png);
	background-repeat: no-repeat;
	background-position: 7px center;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
}

.top_menu_box_menu ul li a:hover {
	
}

.top_menu_box_menu ul li:last-child a {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}

最後に、タブレット端末向けの” top.css ”に追記した内容です。
本テンプレートではスマホ用と同一の内容にしているので、環境に併せて適宜調整をお願い致します。 

/******************************************
 トップページのメニュー用CSS
******************************************/

.top_menu {
	width: 100%;
	margin: 0 auto;
}

.top_menu:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.top_menu_l {
	width: 49%;
	float: left;
}

.top_menu_r {
	width: 49%;
	float: right;
}


.top_menu_box {
	width: 100%;
	clear: both;
	margin-bottom: 20px;
}

.top_menu_box_w {
	width: 98%;
	margin: 0 auto;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border: 1px solid #ff0033;
}

.top_menu_box_ttl {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #ff0033;
}

.top_menu_box_ttl:after {
	content:".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.top_menu_box_ttl h3 {
	color: #fff;
	font-weight: bold;
	float: left;
	padding-left: 10px;
}


.top_menu_box_ttl i {
	display: block;
	float: right;
	text-align: right;
	color: #fff;
	padding-right: 10px;
	padding-top: 5px;
}

.top_menu_box_menu {
	width: 99%;
	margin: 0 auto;
	background-color: #fff;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}

.top_menu_box_menu ul {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}

.top_menu_box_menu ul li {
	text-align: left;
	font-size: 18px;
}

.top_menu_box_menu ul li a {
	display: block;
	background-image: url(/img/topmenuicon.png);
	background-repeat: no-repeat;
	background-position: 7px center;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
}

.top_menu_box_menu ul li a:hover {
	
}

.top_menu_box_menu ul li:last-child a {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
}
プラスとマイナスのアイコンについて

プラスとマイナスのアイコンは、FontAwesomeを使っています。
本家ブログ記事でも説明記事があります。
また、当サイトでも過去に書いている記事がありますので、併せて読んでください。

htmlの枠組みについて

htmlの枠組みについては、デザイン的に、少し触りやすくしたつもりですが、自由に触れる感じですので、適宜調整してみると面白いかもしれません。

その他、補足

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。
締め

いかがでしたでしょうか？
js記述が簡単な記述でしたので、手軽に組み込めますよね。
本家ブログ様に感謝です。

このjQueryプラグインの良いところは、他のソースを組み入れやすい、そしてカスタマイズしやすいところにあると思います。
js記述の途中に、他の動作の記述も書き入れやすい状態になっています。
色々チャレンジするのもありだと思いました。

初歩的なカスタマイズから憶えたい方には、是非おススメしたいプラグインです。

執筆 : 清水 隼斗

開閉によってアイコンを切り替える「アコーディオンメニュー」の通常ページ