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

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

スライドメニューを実現する便利なライブラリやプラグインもありますが、今回はそれらを使いません。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 から読み込んでいます。

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

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ