スマホ ドロワーメニュー 下地 ０１
| <html> | |
| <head> | |
| <style> | |
| nav { | |
| width: 312px; | |
| height: 100%; | |
| transition: all 0.2s; | |
| transform: translate(312px); | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| z-index: 1000; | |
| background-color: #FFF; | |
| } | |
| nav.open { | |
| transform: translate(0); | |
| } | |
| </style> | |
| </head> | |
| <script> | |
| // jQueryは読み込み済み前提 | |
| $(function(){ | |
| $('.btn_menu').click(function(){ | |
| $('nav').toggleClass('open');} | |
| }); | |
| }) | |
| </script> | |
| <button type="button" class="btn_menu"> | |
| <!-- ボタンの記述 --> | |
| </button> | |
| <nav> | |
| <!-- ナビの記述 --> | |
| </nav> | |
| </html> |
