【jQuery】ドロワーメニュー 横からスライド表示するメニュー
前回アコーディオンメニューやハンバーガーメニューを実装したのでせっかくなので今度は横のスライド「Drawer Menu（ドロワーメニュー）」を実装してみたいと思います。
左からスライドしてくるメニューと一緒にメインコンテンツも一緒に左にスライドするパターンと、
メインコンテンツはそのままで、メニューと一緒にメニューボタンもスライドしてメインコンテンツの上にオーバーレイするパターンを作成してみました。
目次
メインコンテンツもスライド
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="wrapper"> <main> <h1>ドロワーメニュー</h1> <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p> </main> <div class="menu-trigger" href=""> <span></span> <span></span> <span></span> </div> <nav> <ul> <li>MENU</li> <li>MENU</li> <li>MENU</li> </ul> </nav> <div class="overlay"></div> </div> |
「.wrapper」はスタイルを整えるのに使っているだけなので、動作上あってもなくても問題ありません。
「.menu-trigger」はメニューボタンです。
メニューが閉じている時は三本線、開いている時はバツ印になるよくあるアレですね。
「nav」はスライドで表示・非表示が切り替わるメニュー（グロナビ）です。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
.wrapper { height: 100%; overflow-x: hidden; position: relative; } .overlay { content: ""; display: block; width: 0; height: 0; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; transition: opacity .5s; } .overlay.open { width: 100%; height: 100%; opacity: 1; } main { height: 100%; min-height: 100vh; padding: 0 50px; background-color: #eee; transition: all .5s; display: flex; flex-direction: column; justify-content: center; } main.open { transform: translateX(-250px); } main h1 { text-align: center; font-weight: 500; } main p { text-align: center; } .menu-trigger { display: inline-block; width: 36px; height: 28px; vertical-align: middle; cursor: pointer; position: fixed; top: 30px; right: 30px; z-index: 100; /* transform: translateX(0); transition: transform .5s; */} /* .menu-trigger.active { transform: translateX(-250px); } */.menu-trigger span { display: inline-block; box-sizing: border-box; position: absolute; left: 0; width: 100%; height: 4px; background-color: #000; transition: all .5s; } .menu-trigger.active span { background-color: #fff; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger.active span:nth-of-type(1) { transform: translateY(12px) rotate(-45deg); } .menu-trigger span:nth-of-type(2) { top: 12px; } .menu-trigger.active span:nth-of-type(2) { opacity: 0; } .menu-trigger span:nth-of-type(3) { bottom: 0; } .menu-trigger.active span:nth-of-type(3) { transform: translateY(-12px) rotate(45deg); } nav { width: 250px; height: 100%; padding-top: 100px; background-color: rgb(16, 69, 153, 0.8); position: fixed; top: 0; right: 0; z-index: 10; transform: translate(250px); transition: all .5s; } nav.open { transform: translateZ(0); } nav li { color: #fff; text-align: center; padding: 10px 0; } |
6行目～23行目：メニューが開いている時に「メニューボタン（バツ印）」以外の部分をクリックしても閉じるように黒い半透過のレイヤーを引きます。今回の実装に直接関係ありませんがユーザービリティという名のやさしさ設計ですね。
34行目～36行目：メニューが開いた時にメニュー幅分メインのコンテンツも左にスライドさせます。
100行目：メニューはデフォルト時は画面の右側の外にはみだすようにtranalateさせておきます。3行目の「.wrpper」に「overflow-x: hidden;」ではみ出した部分は表示されないようにしてあります。
104行目～106行目：メニューが右側から左にスライドしてきます。
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$('.menu-trigger').on('click',function(){ if($(this).hasClass('active')){ $(this).removeClass('active'); $('main').removeClass('open'); $('nav').removeClass('open'); $('.overlay').removeClass('open'); } else { $(this).addClass('active'); $('main').addClass('open'); $('nav').addClass('open'); $('.overlay').addClass('open'); } }); $('.overlay').on('click',function(){ if($(this).hasClass('open')){ $(this).removeClass('open'); $('.menu-trigger').removeClass('active'); $('main').removeClass('open'); $('nav').removeClass('open'); } }); |
cssでopen/closeのレイアウトを変更できるようにクラス名を追加・削除します。
14行目～20行目：メニューボタンだけでなく黒い半透過のレイヤーをクリックしてもメニューが閉じるように各クラスを削除します。
デモ
実際の動きはこちらになります。
See the Pen Drawer Menu by Creative Next (@Creative_Next) on CodePen.
メニューだけスライド
HTML
HTMLは先程と同じです。
CSS
|
1 2 3 4 5 6 |
.menu-trigger { transform: translateX(0); } .menu-trigger.active { transform: translateX(-250px); } |
先程はメニューボタンは固定でしたが、今回はメニューボタンもスライドするように数行追加します。
また今回はメインコンテンツはスライドしないので「main.open {transform: translateX(-250px);}」の記述は必要ありません。
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('.menu-trigger').on('click',function(){ if($(this).hasClass('active')){ $(this).removeClass('active'); $('nav').removeClass('open'); $('.overlay').removeClass('open'); } else { $(this).addClass('active'); $('nav').addClass('open'); $('.overlay').addClass('open'); } }); $('.overlay').on('click',function(){ if($(this).hasClass('open')){ $(this).removeClass('open'); $('.menu-trigger').removeClass('active'); $('nav').removeClass('open'); } }); |
基本は先程はと同じですが、今回はメインコンテンツは固定なので「<main>」にクラスを追加・削除する記述は必要ありません。
デモ
実際の動きはこちらになります。
See the Pen qypqgg by Creative Next (@Creative_Next) on CodePen.
まとめ
ハンバーガーメニューには賛否あるようですが、手軽に少しおしゃれな感じにしたいという時にはまだ重宝されている仕様な気がします。
by N
