このページの本文へ

DESIGN こうめの“これから使える”jQueryプラグイン ― 第16回

Facebook風ドロワーメニューが手軽に導入できる drawer

2014年09月25日 11時00分更新

大竹孔明

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

drawer


 「drawer」は、横からせり出してくる「ドロワーメニュー」をサイトに手軽に実装できるjQueryプラグインです。

GoogleやFacebookのモバイルサイトで利用されているdrawer
GoogleやFacebookのモバイルサイトで利用されているdrawer

 ドロワーメニューはスマートフォンやタブレットなどのさまざまな画面サイズに柔軟に対応できる利点があり、GoogleやFacebookのモバイルサイトで利用されています。drawerプラグインは横幅の可変に対応していますので、レスポンシブ Web デザインにも利用できます。

 drawerプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 10以降、スマートフォンではiOS 7のSafariとChromeに対応しています。

 MITライセンスですので、著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、drawerをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

GitHubページの画像
GitHubページの画像

 drawerは、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。


bower install drawer

 利用するWebページのbodyの閉じタグ直前で、jQuery本体とダウンロードした drawerの dist/js フォルダにある minifyファイル、jquery.drawer.min.js を読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.drawer.min.js"></script>
</body> 
//(中略)

 viewportで拡大縮小を不可にします。


//(中略)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
//(中略)

 これで準備はOKです。

step2 基本的な使い方

 実際にプラグインの使い方を説明します。

 jquery.drawer.min.js を読み込んだ後、drawer()メソッドを実行します。drawer()メソッドは、使用したい要素をセレクターと.(ドット)繋ぎで指定します。下の例ではID名「drawer」を指定しています。

JavaScript


//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.drawer.min.js"></script>
<script type="text/javascript">
$('.drawer').drawer();
</script> 
</body>
//(中略)

 HTMLを記述します。bodyに対してclass名「drawer」を付与します。加えて、下の例ではドロワーメニューがウィンドウの左側から出てくるように、「drawer-left」というclass名を指定しています。ドロワーメニューを右側に表示する場合は「drawer-right」とします。

HTML


//(中略)
<body class="drawer drawer-left"> 
//(中略)

 ドロワーメニューを開閉するボタンに対しては、 class名「drawer-toggle」を指定します。

HTML


//(中略)
<body class="drawer drawer-left"> 
  <button class="drawer-toggle">
    ドロワーメニューを開くボタン
  </button> 
//ドロワーメニュー本体のマークアップを記述
//(中略)

 ドロワーメニューの本体をマークアップします。ドロワーメニューを内包する div 要素に対してclass名「drawer-masta」「drawer-default」を、ナビゲーション要素に対してclass名「drawer-nav」を指定します。

HTML


//(中略)
  </button>
  <div class="drawer-masta drawer-default">
  <nav class="drawer-nav">
//(中略) ドロワーメニューの内容
  </nav>
  </div>
//(中略)

 ドロワーメニューの内容を記述します。メニューのタイトル部分にclass名「drawer-brand」、リストを内包する要素にclass名「nav」「drawer-nav-list」を指定しましょう。

HTML


//(中略)
<nav class="drawer-nav">
  <div class="drawer-brand">
    <a href="#">Drawer</a>
  </div>
  <ul class="nav drawer-nav-list">
    <li><a href="#">リスト1</a></li>
    <li><a href="#">リスト2</a></li>
    <li><a href="#">リスト3</a></li>
  </ul>
</nav>
//(中略)

 ドロワーメニューをコンテンツ部分にオーバーレイで表示するには、コンテンツ部分を内包する要素に対してclass名「drawer-overlay」を指定します。

HTML


//(中略)  
  </nav>
  </div>
  <div class="drawer-overlay">
   コンテンツ
  </div>
</body>
//(中略) 

 head要素内に、先ほどダウンロードしたプラグインのdist/css内にある「drawer.min.css」を読み込みます。

CSS


//(中略)
<head>
<link rel="stylesheet" href="css/drawer.min.css">
</head>
//(中略)

 以下のようになれば成功です。

step3 オプションによるカスタマイズ

 HTMLに付与するclass名や、ドロワーの幅を変更したい場合は、以下のようにオプションを指定します。複数のオプションを指定する場合は、,(カンマ)区切りで指定します。


//(中略)
  $('.drawer').drawer({
  // ここにオプションを指定する
    mastaClass:        "drawer-masta",
    navClass:          "drawer-nav"
  });
//(中略)

オプション 説明 デフォルト値
mastaClass ドロワーメニューの親要素に付与するclass名を指定します。 drawer-masta
navClass ドロワーメニューのナビゲーションに付与するclass名を指定します。 drawer-nav
navListClass ドロワーメニューのリストに付与するclass名を指定します。 drawer-nav-list
overlayClass ドロワーメニューが開いている間、オーバーレイで表示するコンテンツのclass名を指定します。 drawer-overlay
toggleClass ドロワーの開閉ボタンに付与する class名を指定します。 drawer-toggle
openClass ドロワーを開く要素に付与する class名を指定します。 drawer-open
closeClass ドロワーを閉じる要素に付与する class名を指定します。 drawer-close
responsiveClass 後述するレスポンシブ対応を適用するclass名を変更します。 drawer-responsive
desktopEvent ドロワーの開閉ボタンに付与する class名を指定します。 drawer-toggle
toggleClass デスクトップ表示のときに、ドロワーを表示するボタンの挙動を指定します。「mouseover」を指定するとマウスホバーでドロワーを表示します。 click
drawerWidth ドロワーの幅をピクセルで指定します。 280

 オプションで変更できるclass名以外は、CSSファイルの修正で対応できます。

step4 レスポンシブWebデザインに対応する

 レスポンシブWebデザインのサイトで、デスクトップのときはドロワーを展開しておき、スマートフォンのときには隠す場合は、「responsiveClass」オプションで指定したclass名を、body要素に付与します。

HTML


//(中略)
<body class="drawer drawer-responsive drawer-left">
//(中略) 

 以下の動画のようになれば成功です。


注意点

 このプラグインでは、viewportの設定で、ユーザーによる拡大縮小を不可に指定する必要があります。ユーザビリティを大きく損なうためため、モバイルサイトで利用するときには慎重に検討しましょう。

 いかかでしょうか? Webサービスや、モダンなデザインの Webサイトなどで活躍しそうですね!


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング