【jQuery】超便利なドロワー風ナビゲーションメニューの紹介【簡単】
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">☰ 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">☰ 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秒で解約できます。無料登録は「こちら」です。