【jQuery】レスポンシブ対応メニューにPushyのススメ

[PR]

レスポンシブ対応サイトのメニューに使用した「Pushy」。
にゅっと横からコンテンツをスライドして表示させるこのプラグインは、軽量かつシンプルなのでカスタマイズしやすく使い勝手が良かったので、紹介します。
モダンブラウザにおいてはCSSでスライドを実現していて、IE9においてはJSでスライドさせています。
よって、IE9を考慮しなければ基本的にカスタマイズはCSSの編集となりますので、スクリプト初心者でも簡単です。

公式サイト – Pushy – Off-Canvas Navigation Menu
※執筆時ver：Pushy – v1.0.0 – 2016-3-1

デモが公式サイトにあり、「Menu」を押下すれば動作は一目瞭然です。
メインコンテンツ部分がオーバーレイされて、メニューを目立つようにしているのがオシャレでニクい。

Pushyの使い方

前提

デフォルトのスライド横幅は200pxですが、SCSSを使える環境であれば1箇所の編集のみで、横幅変更を対応可能です。
通常のCSSであれば、5箇所の編集が必要となります。
PushyはSCSSにて作られているので、SCSSを編集できることが望ましいです。
よろしければこちらの記事を参考にSCSSを編集できるgulpを導入してみてはいかがでしょうか。

外部ファイル

head内でpushy.cssを読ませ、jQueryとpushy.jsを</body>の上に記述して読ませます。
※jQueryとpushy.jsもhead内で読ませる場合は、pushy.jsを「$(document).ready」で読ませると良いでしょう。

<head>
  <link href="css/pushy.css">
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="js/pushy.js"></script>
</body>

HTML（サイドコンテンツ）

横からスライドさせるコンテンツを<body>の下に配置します。
navでナビゲーションとしていますが、divで内包したコンテンツでも問題ありません。

<!-- サイドコンテンツ -->
<nav class="pushy pushy-left">
  <ul>
    <li class="pushy-submenu">
      <a href="#">Submenu</a>
      <ul>
        <li class="pushy-link"><a href="#">Item 1</a></li>
        <li class="pushy-link"><a href="#">Item 2</a></li>
        <li class="pushy-link"><a href="#">Item 3</a></li>
      </ul>
    </li>
    <li class="pushy-link"><a href="#">Item 1</a></li>
    <li class="pushy-link"><a href="#">Item 2</a></li>
  </ul>
</nav>
<!-- /サイドコンテンツ -->

HTML（オーバーレイコンテンツ）

デモのようにコンテンツ部分をオーバーレイさせるには、メインコンテンツより上の位置にオーバーレイコンテンツを配置します。
記述しなくても特にエラーは出ないので、必要なければ記述しなくて問題ありません。

<!-- オーバーレイ -->
<div class="site-overlay"></div>
<!-- /オーバーレイ -->

HTML（メインコンテンツ）

横からスライドさせるコンテンツ以外の、メインコンテンツをdivで配置します。

<!-- メインコンテンツ -->
<div id="container">
  <!-- Menu Button -->
  <div class="menu-btn">&#9776; Menu</div>
</div>
<!-- /メインコンテンツ -->

HTML完成

ここまでのコードを組み合わせると、下記のようになります。
Pushyを実行させるためのscriptは必要ありません。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Pushy</title>
  <meta name="description" content="">
  <meta name="keywords" content="" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <link href="css/pushy.css">
</head>
<body>
<!-- サイドコンテンツ -->
<nav class="pushy pushy-left">
  <ul>
    <li class="pushy-submenu">
      <a href="#">Submenu</a>
      <ul>
        <li class="pushy-link"><a href="#">Item 1</a></li>
        <li class="pushy-link"><a href="#">Item 2</a></li>
        <li class="pushy-link"><a href="#">Item 3</a></li>
      </ul>
    </li>
    <li class="pushy-link"><a href="#">Item 1</a></li>
    <li class="pushy-link"><a href="#">Item 2</a></li>
  </ul>
</nav>
<!-- /サイドコンテンツ -->
<!-- オーバーレイ -->
<div class="site-overlay"></div>
<!-- /オーバーレイ -->
<!-- メインコンテンツ -->
<div id="container">
  <!-- Menu Button -->
  <div class="menu-btn">&#9776; Menu</div>
</div>
<!-- /メインコンテンツ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/pushy.js"></script>
</body>
</html>

最初のli部分に「pushy-submenu」というclassが入っていて、liの中にulが入っていることが確認できるかと思います。
Pushyにはサブメニュー用の処理もデフォルトで入っているので、このプラグイン一つでサブメニュー付メニューが簡単に作れてしまうのも魅力です。

カスタマイズ

デモと同様に動かすにはここまでとなりますが、実際に使うにはidやclassが決められていたり、上記のようなシンプルなテンプレートではないことも多々あるかと思います。
僕が実際に使ってみて分かったことなどを解説します。
CSSはSCSSの記述となりますので、CSSの場合は対象箇所を適宜ご対応ください。

右からスライドさせたい

サイドコンテンツのclassを「pushy-right」にします。

html

<nav class="pushy pushy-right">

ヘッダーやフッターもメインコンテンツと同様にスライドさせたい

SCSSとJS（IE9用）に対象となるコンテンツのclass等を追記します。
class名を見て分かる通り左からのスライドの場合です。

pushy.scss

// 54行目
.pushy-open-left{
    #container,
    .push,
    #ヘッダーid,
    .フッターclass,
    .コンテンツclass{
        -webkit-transform: translate3d( $menu_width ,0,0);
        -ms-transform: translate3d( $menu_width ,0,0);
        transform: translate3d( $menu_width ,0,0);
    }
}
// 89行目
#container,
.pushy,
.push,
#ヘッダーid,
.フッターclass,
.コンテンツclass{
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
}

pushy.js

// 10行目：IE9用
push = $(&#039;.push,#ヘッダーid,.フッターclass,.コンテンツclass’),

注：IE9においては各要素は「position: relative;」である必要があります

サイドコンテンツ内に閉じるボタンがほしい（オーバーレイを非表示にしたら必須です）

サイドコンテンツ内に「pushy-link」というclassの要素を配置します。

サイドコンテンツの横幅を200pxから変更したい

SCSSの数値を編集します。

pushy.scss

// 6行目
$menu_width: 380px !default;

サイドコンテンツの表示スピードを変更したい

SCSSとJS（IE9用）の数値を編集します。

pushy.scss

// 89行目
#container,
.pushy,
.push,
#ヘッダーid,
.フッターclass,
.コンテンツclass{
    transition: transform 1s cubic-bezier(.16, .68, .43, .99); // 表示スピードを1秒に変更
}

pushy.js

// 16行目：IE9用
menuSpeed = 1000, // 表示スピードを1秒に変更

まとめ

最初に使ってみた時は、ドキュメント類もシンプルだったので簡単に動かせましたが、カスタマイズをどうやってすればいいか不明で、とっつきにくいヤツでした。
しかし、きちんと理解して使ってみると、やっていることはシンプルなので他の処理を邪魔することなく、使い勝手の良い素直ないいヤツという印象に変わりました。
他にも類似ライブラリはたくさんありますが、よろしければぜひ「Pushy」も使ってみてはいかがでしょうか。

[PR]

コメント