javascript単体で動作するドロワーメニューを実装しよう -Slideout.js-

Slideout.jsを使用したjavascript単体で動作するドロワーメニューを実装してみましょう!


Slideout.jsを使えばシンプルなコードでjQueryに依存しないスライドアニメーションのドロワーメニューが実装可能です!
とてもなめらかな動きかつ軽量なので使いやすさ◎です。

今回のデモではハンバーガーメニューアイコンとアニメーションも
CSSと数行のjavascriptだけで実装しているので合わせてご紹介いたします♪

Slideout.jsの使い方

まずはSlideout.jsからSlideout.jsのファイル一式をDLします。

DLしたファイルの中の

  • index.css
  • slideout.min.js

 は外部リンクを貼って利用します。
以下のコードをドロワーメニューを実装したいhtmlファイルに記述します。

▼HTML

次に、ナビゲーション(#menu)とコンテンツ(#panel)の記述をします。
※idは任意の文字列に変更可能です。

▼HTML

続いて、JavaScriptのオプションを指定します。
簡単な設定はSlideout.jsFAQにコードとともに記載があるため、興味がある方はカスタマイズも是非試してみてくださいね。

▼JavaScript

Slideout.jsでドロワーメニューを実装する設定は以上です。

今回のデモではハンバーガーボタンのアニメーション用にCSSとJavaScriptを使用しています。
合わせて設定してみてくださいね。

▼CSS

▼JavaScript

今回、参考にさせていただいたのは、
『Slideout.js』
『コリス』
『Qiita』
です。
ありがとうございます♪

デモページは、こちら