スライドメニューのプラグインを使わない実装方法

メニューボタンをタップすると横からメニューが出てくるスライドメニューは、画面サイズの小さいスマートフォンに適したメニューです。スライドメニューをプラグインを使わないで実装する方法を解説します。

スライドメニューを実現する便利なライブラリやプラグインもありますが、今回はそれらを使いません。jQuery関数および CSS3のtransformプロパティだけで実装してみます。

下記の図のようなスライドメニューを実装する方法を、HTML/CSS/JavaScriptのサンプルコードを示しながら説明します。

スライドメニューを実装したスマホ画面

【コンテンツ】

  1. スライドメニューのHTMLとCSSコードを作成する
  2. メニューボタンをクリックしたときのJavaScriptコードを作成する
  3. jsファイル読み込みコードをHTMLに記述する

スライドメニューのHTMLとCSSコードを作成する

スライドさせるメニューをHTMLに記述しますが、コンテンツ部分と別にします。
今回は以下のようなレイアウト構成にしてメニューを記述しました。

header要素にメニューボタンを設けていますが、その部分のCSSは以下になります。

メニューは絶対配置で通常時は左に隠しておきます。
そしてメニューボタンをタップしたら、transformプロパティの値を変化させスライドして出てくる仕様です。

メニュー部分のCSSは以下になります。

body要素に、transitionプロパティを使って、transformプロパティの変化する時間を設定しています。メニューのスライドする時間を調整したいときは、ここで設定している "0.4s" を変えてください。

また、スライド動作の速度変化を変えたい場合は、"0.4s" の後にlinear, ease-in, ease-out, ease-in-outなどのパラメータを設定できます。ここでは省略しているので "ease" の動作となります。変更する場合は、「transition: transform 0.4s ease-in-out;」などと記述します。

メニューボタンをクリックしたときのJavaScriptコードを作成する

jQueryの関数を使ってコードを作成します。
メニューが閉じているときにクリックイベントを受け取ったら、body要素全体をスライドメニューのwidth分だけ横に移動させます。そして、メニューが開いているときにクリックイベントを受け取ったら元に戻します。

JavaScriptコードは以下になります。

jsファイル読み込みコードをHTMLに記述する

作成したJavaScriptコードは、何か適当なファイルに記述します。
ここでは「slide_menu.js」としておきましょう。それをサイトのディレクトリ内に配置します。

そしてHTMLのheadタグ内に、以下のように jsファイルを読み込む記述を追加します。
jQuery本体も必要ですので、Google Hosted Libraries から読み込んでいます。

以上、スライドメニューをプラグインを使わないで実装する方法を解説しました。非常にシンプルな記述で実装できることがお分かりいただけたと思います。

スポンサーリンク

ページの先頭へ