2017/11/16

【jQuery】超便利なドロワー風ナビゲーションメニューの紹介【簡単】

PROGRAMMING

jQueryでイケてるドロワーメニュー（ナビゲーション）を実装したい方向け。

本記事では、jQueryで超便利なドロワー風ナビゲーションメニューの『Pushy』をご紹介します。
» Pushy – Off-Canvas Navigation Menu

jQueryの便利なドロワー風ナビゲーションメニュー：Pushyのデモ

こんな感じ。
このサイトにも入っていますし、僕がクライアントワークに使うサイトでも良く使います。

Pushyの実装方法

必要なスクリプトを読み込んだ後に、テンプレート通りにHTMLを記載すればOK。

Pushyを動かすために必要なスクリプト【HTML／CSS／JavaScript】

下記をコピペでそのまま動きます。

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pushy/1.1.2/css/pushy.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>

<body>
<!-- Pushy Menu -->
<nav class="pushy pushy-left">
    <div class="pushy-content">
        <ul>
            <li class="pushy-link"><a href="#">メインメニュー 1</a></li>
            <li class="pushy-link"><a href="#">メインメニュー 2</a></li>
            <li class="pushy-submenu">
                <button>ドロップダウンメニュー</button>
                <ul>
                    <li class="pushy-link"><a href="#">ドロップダウンメニュー 1</a></li>
                    <li class="pushy-link"><a href="#">ドロップダウンメニュー 2</a></li>
                    <li class="pushy-link"><a href="#">ドロップダウンメニュー 3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<!-- Site Overlay -->
<div class="site-overlay"></div>

<!-- Your Content -->
<div id="container">
    <!-- Menu Button -->
    <button class="menu-btn">&#9776; Menu</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pushy/1.1.2/js/pushy.min.js"></script>
</body>
</html>

注意点：pushy.min.jsはページに一番最後で読み込むこと

よくあるミスとして、pushy.min.jsをhead内で読み込んでしまうこと。
そうすると動きませんので、必ずコードの最後で読み込みましょう。

WordPressサイトの場合の実装方法

jQueryは自動的に読み込まれているはずなので、その部分は不要です。

テーマファイルのheader.phpに下記を貼り付けましょう。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pushy/1.1.2/css/pushy.min.css">

テーマファイルのfooter.phpに下記を貼り付けましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/pushy/1.1.2/js/pushy.min.js"></script>

最後に、ナビバーを表示したい場所に下記HTMLを貼り付けたらOKです。

<!-- Pushy Menu -->
<nav class="pushy pushy-left">
    <div class="pushy-content">
        <ul>
            <li class="pushy-link"><a href="#">メインメニュー 1</a></li>
            <li class="pushy-link"><a href="#">メインメニュー 2</a></li>
            <li class="pushy-submenu">
                <button>ドロップダウンメニュー</button>
                <ul>
                    <li class="pushy-link"><a href="#">ドロップダウンメニュー 1</a></li>
                    <li class="pushy-link"><a href="#">ドロップダウンメニュー 2</a></li>
                    <li class="pushy-link"><a href="#">ドロップダウンメニュー 3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<!-- Site Overlay -->
<div class="site-overlay"></div>

<!-- Your Content -->
<div id="container">
    <!-- Menu Button -->
    <button class="menu-btn">&#9776; Menu</button>
</div>

よくあるカスタマイズ

ドロワーメニューの幅を広げたいときは下記のCSSで調整できます。
下記はドロワーメニューの幅を300pxにする場合です。CSSがちょい多めですが、すべて記載しましょう。

.pushy{
    width: 300px;
}

.pushy-left{
    transform: translate3d(-300px,0,0);
}

.pushy-open-left #container,
.pushy-open-left .push {
    transform: translate3d(300px, 0, 0);
}

.pushy-right {
    transform: translate3d(300px, 0, 0);
}

.pushy-open-right #container,
.pushy-open-right .push {
    transform: translate3d(-300px, 0, 0);
}

これで終わりなのですが、その他にも使いやすそうなドロワー風ナビゲーションメニューをまとめておきます。