低価格・高品質・最速のHTMLコーディングはクロノドライブへ

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

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

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ