やってみると意外と簡単！？jQueryでアコーディオンメニューを作る方法

朝晩がすっかり寒くなってきたこの頃、みなさんいかがおすごしでしょうか？
週末は四条河原町周辺で急いで秋服を買い足した、開発部ヤマダです。

さてさて、行楽シーズンはなにかとお忙しい！という方も多いと思います。

逆に今だから時間があり、Webサイトの見せ方を工夫したいなぁ・・・と考えていて、jQueryを勉強してサイトをカスタマイズしたい！！と意気込んでいる方もいらっしゃるかと思います。
（きっといるはず★）

今日のブログはそんな方へ、開発部の私からjQueryの”プチ”アドバイスです！

1. jQueryとJavaScriptの関係

jQueryとJavaScriptの関係

ちょっとその前に…jQueryとJavaScriptの関係とは何なのでしょうか？

JavaScriptはブラウザと直接やりとりしてWebページの見た目や内容を変える便利な言語です。

ところがJavaScriptには弱点があり、IE8以前のIEとそれ以外のブラウザで大きく挙動が異なることや、最新のブラウザでも動作が微妙に異なることなど、JavaScriptで記述しようと思うとそれなりにノウハウとテクニックが必要です。

そこで登場するのがjQueryです！ブラウザ同士の互換性も吸収してより簡単にスクリプトを記述できるようになっています。文法も比較的簡単で、プログラミングの経験がないWebデザイナーやマークアップエンジニアでも理解しやすいのが特徴です。

例えば、

HTML

<p id="demo_text">おはようございます</p>

というHTMLドキュメントの内容を書き換えたい場合、

JavaScript

window.onload=function(){
	var element = document.getElementById("demo_text");
	//値の書き換え
	element.innerHTML = 'おはよう';
};

でも書き換えられますが、

jQUery

$(function(){
	$("#demo_text").html('こんにちは');
});

でも書き換えられます。

jQueryはJavaScriptをより簡単に使えるように開発されたライブラリなんですね。ちなみに、jQuery自身はJavaScriptで書かれています。それでは実際にスクリプトを記述して画面を操作してみましょう！

アコーディオンメニューの実現

jQueryを使ったスクリプトは常にほぼ一定のパターンに沿った構造になります。
まずはそのパターンを把握するために、簡単な例文を書いてみましょう。

■jQueryの基本形

$(function(){});

これがjQueryの基本の記述です、これだと少し見にくいので「{」と「}」の間に改行をいれてみます。

$(function(){

});

間に改行を入れるとかなり見やすくなったのではないでしょうか？jQueryはまず上の基本の記述があって、それを見やすく改行したのでいつもおなじみの形になっていたのですね。それでは、改行を入れた箇所にjQueryを書いてみましょう！

（本日はサンプルでアコーディオンメニューを作成します！）

１、HTMLでナビゲーションを記述する

まずは基本となるナビゲーションをHTMLで記述していきます。今回は下記のような内容でナビゲーションを作成しました。


<div class="wrapper-nav-global">

<div class="menubtn"><a href="#">MENU</a></div>

<ul class="nav-global">

<li><a href="#">ABOUT</a></li>

<li><a href="#">GROW</a></li>

<li><a href="#">PLAN</a></li>

<li><a href="#">SHARE</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</div>

２、head内にjQueryライブラリへのリンクを貼る

jQueryは、jQueryの公式サイトやGoogleのCDNサーバーへ直接リンクを貼る方法で読み込むことが可能です。

今回はGoogleのCDNサーバーを利用する方法で、ライブラリへのリンクを貼ります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
※IE8までを考慮しないのであれば、2.x系を読み込んでも可

上記の読込コードを、サイトの<head>〜</head> 内に記述します。

３、jQueryを記述する

JavaScript用のファイルを用意して、そこにjQueryを記述していきます。

今回は下記のように記述しました。

$(function(){
	$(window)
	.on('resize', function(){
		var $nav = $('.nav-global');
		var listFloat = $nav.find('li').css('float');
		if(listFloat == 'none') {
			$nav.css('display', 'none');
		} else {
			$nav.css('display', 'block');
		}
	});

	$('.menubtn > a')
	.on('click', function(){
		$('.nav-global').slideToggle(400);
	});
});

この記述をしたファイルも<head>〜</head>で読み込むことを忘れないようにしてください。

４、CSSで見栄えを調整する

最後にスタイルシートで見栄えを調整します。今回は下記のように記述しました。

.menubtn {
    display: block;
    background-color: rgb(86, 97, 88);
    padding: 5px 8px;
}
.menubtn a {
	display: block;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}
.nav-global {
	display: none;
}
.nav-global li {
    float: left;
    width: 100%;
    text-align: left;
    border: 1px solid #fff;
    padding: 5px;
}

最後に、完成したサイトのデモはこちらです。
アコーディオンメニューデモサイト
※サイト内にある「MENU」というボタンを押して、動きを確かめてください。

終わりに

実は、弊社が提供するレスポンシブECサイトASP「aishipR」ではjQueryを簡単に使えるような仕組みが用意されています。

通常、jQueryやJavaScriptはコードを書いて、ファイルを保存して、FTPソフトなどでアップしなければなりませんが、aishipRの管理画面から簡単にアップが出来るようになっています。

ただaishipRに限らずjQueryはさまざまな表現が実現できますので、ぜひ色々な実装を試してみてください。

ウェブサイトを作る予定の方も、そうでない方も、今秋がみなさんにとって素敵な時間になりますように。

ヤマダでした。

商品の販売に“夢中”になれる

クラウド型ECサイト構築ASP