WorkTRAVELTHOUGHTPARTY2017/11/16【jQuery】超便利なドロワー風ナビゲーションメニューの紹介【簡単】PROGRAMMINGjQueryでイケてるドロワーメニュー(ナビゲーション)を実装したい方向け。本記事では、jQueryで超便利なドロワー風ナビゲーションメニューの『Pushy』をご紹介します。MenujQueryの便利なドロワー風ナビゲーションメニュー:Pushyのデモこんな感じ。このサイトにも入っていますし、僕がクライアントワークに使うサイトでも良く使います。必要なスクリプトを読み込んだ後に、テンプレート通りにHTMLを記載すればOK。下記をコピペでそのまま動きます。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に下記を貼り付けましょう。href="https://cdnjs.cloudflare.com/ajax/libs/pushy/1.1.2/css/pushy.min.css">テーマファイルのfooter.phpに下記を貼り付けましょう。src="https://cdnjs.cloudflare.com/ajax/libs/pushy/1.1.2/js/pushy.min.js"></script>最後に、ナビバーを表示したい場所に下記HTMLを貼り付けたらOKです。Menu</button></div>よくあるカスタマイズドロワーメニューの幅を広げたいときは下記のCSSで調整できます。下記はドロワーメニューの幅を300pxにする場合です。CSSがちょい多めですが、すべて記載しましょう。0);}これで終わりなのですが、その他にも使いやすそうなドロワー風ナビゲーションメニューをまとめておきます。追加情報:おすすめなドロワー風ナビゲーションメニュー3選3つ厳選しました。Drawerシンプルなドロワーメニューですね。Pushyとかなり似ていますが、よりシンプルで白ベースが好きな人はこちらでもいいかも。CSS.Slidebarsこちらもシンプルですね。右側にドロワーメニューを出したい場合はこれがいいかもですね。Slidebarsの使い方(英語)mmenu大規模サイトはこれがいいかも。デモを見るとわかりますが、かなり階層化されたナビゲーションでも分かりやすく実装できます。submenus今回は以上です。記事が参考になれば幸いです。:16記事で解説】SEO【完全初心者向け】プログラミング学習の始め方【3ヶ月で達成できる】PROGRAMMING【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】PROGRAMMINGマナブブログ・アフィリエイト・プログラミングを愛しています。ブログを書きまくる→ブログ収益7桁達成。普段はバンコクを中心に南国にひきこもりつつ、生活費は5万円くらいで生きています。me!ブログ・アフィリエイト・プログラミングを愛しています。ブログを書きまくる→ブログ収益7桁達成。普段はバンコクを中心に南国にひきこもりつつ、生活費は5万円くらいで生きています。