[jQuery]簡単に作れるスライド式メニュー

2011年11月14日

jQueryを使うと、アニメーションをさせながらメニューの開閉が行えたり、要素を移動させたりすることが可能です。その中で、今回はスライドしながら開閉するメニューのサンプルをご紹介します。

導入の手順

まず、head要素内でjQueryのコアファイルを読み込みます。

`1`	`<script type="text/javascript"` `src="js/jqery-1.5.1.min.js"></script>`

上記のサンプルではjQueryのVer.1.5.1を読み込んでいますが、利用する環境に合わせて書き換えてください。

また、同じくhead要素内で、各要素の高さを操作してslideDown/slideUpの動作を行うための関数、slideToggleの呼び出しを行います。

1$(document).ready(function(){
2    $("スイッチとなる要素").click(function () {
3        $("スライドさせる要素").slideToggle();
4    });
5});
6</script>

上記はサンプルですが、実際に要素を入れ込むと下記のようになります。

1$(document).ready(function(){
2    $(".testBox").click(function () {
3        $(".testBtn").slideToggle();
4    });
5});
6</script>

要素にはid、class及び要素名を入力することが可能です。

1$(document).ready(function(){
2    $(".testBox").click(function () {
3        $(".testBtn a").slideToggle();
4    });
5});
6</script>

また、スライドする速度も指定することが可能です。指定の方法はslow, normal, fast, ミリ秒指定があり、特に指定しなければnormalとなります。それぞれ、slowは600ミリ秒、normalは400ミリ秒、fastは200ミリ秒に相当します。

1$(document).ready(function(){
2    $(".testBox").click(function () {
3        $(".testBtn").slideToggle("fast");
4    });
5});
6</script>

上記の関数の呼び出しを記述したら、body要素内で指定した要素を用い、コーディングを行います。

1<div class="testBox">
2    <p>スライドするメニューです。</p>
3</div>
4<a href="javascript:void(0)" class="testBtn"><img src="img/btn.jpg" alt="メニューボタン" /></a>

※上記は一例です。

以上で、slideToggleを用いたスライド式メニューの作業は完了です。
詳しいサンプルは、下記よりご覧ください。

こちらよりご覧ください。

jQueryを用いれば、見た目にも楽しいページを手軽に構築することができます。
ぜひお試しください。