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

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

導入の手順

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

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

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

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

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

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

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

※上記は一例です。

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

サンプルデモ

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

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