横から出てくるドロワーメニューの作り方 Publish Date: 2017.07.27 お知らせ ハンバーガーボタン×ドロワーメニューのテンプレートを作成しました。詳しくはこちら CSSのtransitionとtranslateを組み合わせます。 <button type="button" class="btn_menu"> <!-- ボタンの記述 --> </button> <nav> <!-- ナビの記述 --> </nav> 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
![横から出てくるドロワーメニューの作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/22a51999cbd9858cafbaf480c2107b4beb1016d0/height=288;version=1;width=512/https%3A%2F%2Fzarigani-design-office.com%2Fimages%2Farticles%2Fdrawer_menu%2Fogp.png)