drawer
「drawer」は、横からせり出してくる「ドロワーメニュー」をサイトに手軽に実装できるjQueryプラグインです。
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ページの画像
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サイトなどで活躍しそうですね！
