IT女子のお気に入りフォルダ管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。jQueryこの記事は最終更新日から2年以上が経過しています。ドロワーメニューの実現方法はいろいろありますが、これは、少しのcssとJavaScriptで実装できるのでおすすめです。使うと思うので備忘録を兼ねてメモ。※cssはわかりやすいように、ドロワーメニューの実装に必要な部分と、わかりやすくした見た目との記述を分けてみました。通常は分ける必要はないと思います。cssの解説メニューボタンを押すと、画面右側からスルッとメニューが出てくる仕様です。出てくるサイズ幅は300pxとしています。メニューボタンがハンバーガーアイコンだとわかりにくい説は今は置いておいて、FontAwesomeを使用して簡単に表現しています。「.drawer」がメニュー部分です。position:absoluteで右上に配置し、transformプロパティのX値にメニュー幅を指定しています。メニュー出現時は「.drawer.active」というように「.active」クラスを追加し、X値は「0」にします。「#contents」には「.cover」を追加し、出現したメニュー幅分を後退させるため、transformプロパティのX値を「-300px」にします。.3s」と指定しています。JavaScriptの解説メニューボタン(.menu-switch)をクリックした時に「.drawer」には「.active」を、「#contents」には「.cover」をaddClassで追加します。メニューが開いている場合には、removeClassでそれぞれのクラスを削除します。ボタン以外にも、コンテンツエリアをクリックした場合に、メニューを閉じることができると便利なので同様の記述をしています。IT女子のお気に入りフォルダ。