はてなブックマーク

仕様 ・開閉時メニューの横幅分とコンテンツを外にスクロール ・メニューを開いたときにコンテンツ部分がスクロールしない（iPhoneも） ・開閉ボタンをスクロール追従させる ・できるだけCSSで完結する。 説明 デモ 開閉時の挙動 <input type="checkbox" id="nav-tgl"> <label for="nav-tgl" class="open nav-tgl-btn"><span></span></label> /*メニュー部分*/ .drower-menu { transform: translateX(100%); } #nav-tgl:checked ~ .drower-menu { transform: none; } /*コンテンツ部分*/ .content-wrapper { transition: transform .6s cubic-bezier(