予めメニューを画面外に出しておき、ボタンを押したときに画面内に戻るようにすればOK。
ソースコード
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="menu"> <ul class="menu-list"> <li class="menu-list-item"> <a href="">項目1</a> </li> <li class="menu-list-item"> <a href="">項目2</a> </li> <li class="menu-list-item"> <a href="">項目3</a> </li> </ul> <button type="button" class="menu-toggle"></button> </div> |
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 |
.menu { width: 200px; height: 100vh; /* メニューの縦は画面一杯に伸ばす */ background-color: #ccc; position: fixed; top: 0; left: -200px; /* メニューが閉じているときは画面外に出す */ transition: 0.3s; } .menu.open { left: 0; /* メニューを開くと画面内に表示される */ transition: 0.3s; } .menu-list { width: 100%; } .menu-list .menu-list-item { border-bottom: 1px solid #000; } .menu-list .menu-list-item a { display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; transition: 0.5s; } .menu-list .menu-list-item a:hover { background-color: #eee; opacity: 0.5; transition: 0.5s; } button.menu-toggle { border: none; /* 枠線を消す */ outline: none; /* クリックしたときに表示される枠線を消す */ width: 100px; height: 50px; background-color: #eee; cursor: pointer; /* メニューボタンの配置 */ position: absolute; top: 100px; left: calc(200px - 50px * 0.5); /* メニューの幅 - メニューボタンの高さの半分 */ transform: rotate(90deg); /* メニューボタンを縦にする */ } button.menu-toggle:after { content : 'OPEN'; } button.menu-toggle.open:after { content : 'CLOSE'; } |
jQuery
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ /* メニューの開閉 */ $('button.menu-toggle').click(function() { $('button.menu-toggle').toggleClass('open'); $('div.menu').toggleClass('open'); }); }); |
コメントを残す