スマホ用のスライドメニューを作る

スマートフォンサイトなどで使用されるスライド式のメニューを数行のコードを書くだけで簡単に実装する方法です。とてもシンプルな動きなのでスライドメニューの基本的な動き方の1つとして見ていきましょう。

スライドメニューの作り方

jQueryを使って、以下のようなコードを記述するだけで、スライドメニューの動きは作れます。

$(function() {
  $("#menu-btn").click(function() {
    $("#navi").slideToggle();
  });
});

あとは、最初な段階ではメニューは隠しておきたいので、CSSに以下を追加します。

#navi {
  display: none;
}

• DEMO

もう少しだけ手を加えて「menu」と「close」でボタンを切り替える動きを付け加えていきます。

//jQuery
$(function() {
  $("#menu-btn").click(function() {
    $("#navi").slideToggle();
    $("#menu-btn").toggleClass("menu-open");
  });
});

//CSS
#menu-btn.menu-open .open {
  display: none;
}
#menu-btn.menu-open .close {
  display: block;
}

jQueryとCSSに上記のような指定を追加すると、ボタンを切り替えることができます。
「#menu-btn」の要素に「menu-open」というクラスがついていたらクラス「open」がついている要素を非表示にして、クラス「close」がついている要素を表示にするという動きをしています。

• DEMO

このようなシンプルなもので簡単にスマホサイトで使用されるスライドメニューを実装することができます。以上が、スライドメニューの基本的な動かし方となります。