Written by Manabu Bannai

【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);
}

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

追加情報:おすすめなドロワー風ナビゲーションメニュー3選

3つ厳選しました。
さっそく見ていきましょう。

Drawer


シンプルなドロワーメニューですね。
Pushyとかなり似ていますが、よりシンプルで白ベースが好きな人はこちらでもいいかも。
» Drawer – Flexible drawer menu using jQuery, iScroll and CSS.

Slidebars


こちらもシンプルですね。
右側にドロワーメニューを出したい場合はこれがいいかもですね。
» Slidebars | Adchsm
» Slidebarsの使い方(英語)

mmenu


大規模サイトはこれがいいかも。
デモを見るとわかりますが、かなり階層化されたナビゲーションでも分かりやすく実装できます。
» jQuery.mmenu – App look-alike menus with sliding submenus

今回は以上です。
記事が参考になれば幸いです。

※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。