jQueryを使って「slideToggle関数」を呼び出すスライド式のメニューを作成してみましょう。
今回は「slideToggle()」関数を使用します。主な仕組みついてはリファレンスをご確認ください。
各要素の高さを操作することで、slideDown/slideUpの動作を交互に行ってくれます。また、アニメーションの速度は「”slow”,”normal”,”fast”または”完了までの時間をミリ秒”」で指定することができます。デフォルトは「”nonrmal”」が適用されます。
1.jQueryを読み込みます
|
1 |
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> |
jQueryのバージョンによって動作がしない場合がありますので、適宜バージョンを変更して確認してみてください。
2.HTMLを記述
2-1.メニューボタン(シングル:normal)
|
1 2 3 4 5 6 7 8 9 10 |
<div class="menuBox"> <p id="switchButton">メニューボタン(シングル:normal)</p> <ul id="slideMenu"> <a href="#"><li>スライドメニューその1</li></a> <a href="#"><li>スライドメニューその2</li></a> <a href="#"><li>スライドメニューその3</li></a> <a href="#"><li>スライドメニューその4</li></a> <a href="#"><li>スライドメニューその5</li></a> </ul> </div> |
2-2.メニューボタン(ダブル:fast)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="menuBox"> <p id="switchButton2">メニューボタン(ダブル:fast)</p> <ul id="slideMenu2" class="clearfix"> <a href="#"><li>スライドメニューその1</li></a> <a href="#"><li>スライドメニューその2</li></a> <a href="#"><li>スライドメニューその3</li></a> <a href="#"><li>スライドメニューその4</li></a> <a href="#"><li>スライドメニューその5</li></a> <a href="#"><li>スライドメニューその6</li></a> <a href="#"><li>スライドメニューその7</li></a> <a href="#"><li>スライドメニューその8</li></a> <a href="#"><li>スライドメニューその9</li></a> <a href="#"><li>スライドメニューその10</li></a> </ul> </div> |
2-3.メニューボタン(トリプル:slow)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="menuBox"> <p id="switchButton3">メニューボタン(トリプル:slow)</p> <ul id="slideMenu3" class="clearfix"> <a href="#"><li>スライドメニューその1</li></a> <a href="#"><li>スライドメニューその2</li></a> <a href="#"><li>スライドメニューその3</li></a> <a href="#"><li>スライドメニューその4</li></a> <a href="#"><li>スライドメニューその5</li></a> <a href="#"><li>スライドメニューその6</li></a> <a href="#"><li>スライドメニューその7</li></a> <a href="#"><li>スライドメニューその8</li></a> <a href="#"><li>スライドメニューその9</li></a> </ul> </div> |
3.JavaScriptを記述
「slideDown/slideUp」の動作を行うための関数を呼び出します。書き方は以下の通り。
上記の書き方は下記のように簡略化することができます。
どこが違うのかわかりずらいですが、、、先頭の「(document).ready」部分が省略されています。
実際に対象となる要素名を入れていきます。
■ 関数を呼び出す要素
メニューの開閉をするためのボタンとなる要素
■ 関数の実行対象となる要素
初めは隠れているが、ボタンをクリックされると表示されるメニュー部分の要素
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(function(){ $("#switchButton").click(function(){ //#switchButtonがクリックされたら... $("#slideMenu").slideToggle(); //.slideToggle();関数を実行 }); }); </script> |
指定する要素$(” “)には「ID名,クラス名,もしくは要素名」を指定します。
4.アニメーション速度を変更する場合
アニメーション速度は「.slideToggle();」の引数に「”slow”」などのように指定すればOKです。
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(function(){ $("#switchButton").click(function(){ $("#slideMenu").slideToggle("slow"); }); }); </script> |
以上になります。