クリエイティブなWeb制作に
役立つ情報メディア

【jQuery】ドロワーメニュー 横からスライド表示するメニュー

前回アコーディオンメニューやハンバーガーメニューを実装したのでせっかくなので今度は横のスライド「Drawer Menu(ドロワーメニュー)」を実装してみたいと思います。

左からスライドしてくるメニューと一緒にメインコンテンツも一緒に左にスライドするパターンと、
メインコンテンツはそのままで、メニューと一緒にメニューボタンもスライドしてメインコンテンツの上にオーバーレイするパターンを作成してみました。

メインコンテンツもスライド

HTML

「.wrapper」はスタイルを整えるのに使っているだけなので、動作上あってもなくても問題ありません。

「.menu-trigger」はメニューボタンです。

メニューが閉じている時は三本線、開いている時はバツ印になるよくあるアレですね。

「nav」はスライドで表示・非表示が切り替わるメニュー(グロナビ)です。

CSS

6行目~23行目:メニューが開いている時に「メニューボタン(バツ印)」以外の部分をクリックしても閉じるように黒い半透過のレイヤーを引きます。今回の実装に直接関係ありませんがユーザービリティという名のやさしさ設計ですね。

34行目~36行目:メニューが開いた時にメニュー幅分メインのコンテンツも左にスライドさせます。

100行目:メニューはデフォルト時は画面の右側の外にはみだすようにtranalateさせておきます。3行目の「.wrpper」に「overflow-x: hidden;」ではみ出した部分は表示されないようにしてあります。

104行目~106行目:メニューが右側から左にスライドしてきます。

javascript

cssでopen/closeのレイアウトを変更できるようにクラス名を追加・削除します。

14行目~20行目:メニューボタンだけでなく黒い半透過のレイヤーをクリックしてもメニューが閉じるように各クラスを削除します。

デモ

実際の動きはこちらになります。

デモ

See the Pen Drawer Menu by Creative Next (@Creative_Next) on CodePen.

メニューだけスライド

HTML

HTMLは先程と同じです。

CSS

先程はメニューボタンは固定でしたが、今回はメニューボタンもスライドするように数行追加します。

また今回はメインコンテンツはスライドしないので「main.open {transform: translateX(-250px);}」の記述は必要ありません。

javascript

基本は先程はと同じですが、今回はメインコンテンツは固定なので「<main>」にクラスを追加・削除する記述は必要ありません。

デモ

実際の動きはこちらになります。

デモ

See the Pen qypqgg by Creative Next (@Creative_Next) on CodePen.

まとめ

ハンバーガーメニューには賛否あるようですが、手軽に少しおしゃれな感じにしたいという時にはまだ重宝されている仕様な気がします。

N by