2014/01/14

【jQuery】アニメーションを使った開閉式メニューの作り方

【jQuery】アニメーションを使った開閉式メニューの作り方

最近スマートフォンサイトでよく見かける,開閉式のメニューの簡単な作り方を紹介します.

Q&Aなどにも応用が利くので,ちょっと動きを付けたい場合や,隠しておきたい要素がある場合などに利用できます

目次

要素の配置とスタイルの指定

まずはHTML要素を配置します.
クリックする部分と,開閉動作をする部分とで別に配置します.

<div>
<p class="testQ">ここをクリック</p>
<p class="testA">ここが開閉</p>
</div>

divで作成していますが,テーブルでもなんでも構いません.

そして,開閉動作をする部分を,デフォルトの状態で隠しておきたいので,CSSでdisplay:noneを設定します.

.testA{
  display: none;
}

これで,HTML要素の配置はOKです.

アニメーション動作の実装

次に,jQueryを利用して,アニメーション動作を実装します.

testQクラスの部分をクリックした時に開閉動作を設定するので,まず

$(".testQ").click(function() {
    /*行いたい動作*/
});

と記述し,クリックイベントを設定します.

testAクラス部分の開閉動作を行いたいので

$(".testA").animate({
    height : "toggle"
});

を,行いたい動作部分に記述します.

heighttoggleを指定した場合,要素の表示・非表示を切り替える動作になります.

サンプル

サンプルはこちら

ここをクリック

ここが開閉

まとめ

最も簡単に開閉式の要素を作成する方法をご紹介しました.

大規模なものや,他の要素を閉じたりしたい場合などでも,この方法が基本となっていますので,是非色々試してみてください.

クラスやIDを上手に振ると,大規模なものでも比較的簡単に実装することができるので,合わせて考えてみてください.

スマートフォンサイト等でスクロールもさせたい場合は,下記のリンクも参考にしてみてください.

jQueryを利用して,任意の場所にスクロールして移動する方法