0

jQueryでスライド式メニューを作ってみる

 jQueryでスライド式メニューを作ってみる

jQueryを使って「slideToggle関数」を呼び出すスライド式のメニューを作成してみましょう。

 

今回は「slideToggle()」関数を使用します。主な仕組みついてはリファレンスをご確認ください。

 

各要素の高さを操作することで、slideDown/slideUpの動作を交互に行ってくれます。また、アニメーションの速度は「”slow”,”normal”,”fast”または”完了までの時間をミリ秒”」で指定することができます。デフォルトは「”nonrmal”」が適用されます。

 

DEMO

 

1.jQueryを読み込みます

 jQueryのバージョンによって動作がしない場合がありますので、適宜バージョンを変更して確認してみてください。

 

2.HTMLを記述

2-1.メニューボタン(シングル:normal)

menu1

 

 2-2.メニューボタン(ダブル:fast)

menu2

 

2-3.メニューボタン(トリプル:slow)

menu3

 

 

3.JavaScriptを記述

「slideDown/slideUp」の動作を行うための関数を呼び出します。書き方は以下の通り。

toggle1

上記の書き方は下記のように簡略化することができます。

toggle2

どこが違うのかわかりずらいですが、、、先頭の「(document).ready」部分が省略されています。

 

実際に対象となる要素名を入れていきます。

 

■ 関数を呼び出す要素

メニューの開閉をするためのボタンとなる要素

■ 関数の実行対象となる要素

初めは隠れているが、ボタンをクリックされると表示されるメニュー部分の要素

 

 

 指定する要素$(” “)には「ID名,クラス名,もしくは要素名」を指定します。

 

4.アニメーション速度を変更する場合

アニメーション速度は「.slideToggle();」の引数に「”slow”」などのように指定すればOKです。

 

以上になります。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > jQueryでスライド式メニューを作ってみる