### 前提・実現したいこと HTML、CSSの勉強でサンプルページを真似していて、ハンバーガーメニュー自体はできていて、ヘッダーの下からニョキっとメニューバーを出現させるためのスタート位置の指定もできているのですが、最初からメニューバーが出現してしまいます。メニューバーがない状態からハンバーガーボタンを押したときにメニューバーが出るようにするにはどうすればいいでしょうか？ [真似をしているサンプルページ](https://f-tpl.com/sample/tpl_094/) ### 該当のソースコード ```HTML

``` ```CSS /* ---------------------- Start ハンバーガーメニュー ---------------------- /* Start ナビゲーション */ .headerNav { position: relative; top: -10px; width: 100%; height: 45%; background-color: #000; -webkit-transition: all 0.6s; transition: all 0.6s; z-index: 1; } .navList { border-bottom: 1px solid #ccc; background: #000; text-align: left; } .navItem { height: 10%; } .navItem a { position: relative; display: block; padding: 15px 25px; border-bottom: 1px solid #ccc; color: #fff; font-weight: 400; } /* End ナビゲーション */ /* Start ハンバーガーボタン(三本線の実装) */ .hamburger_btn { position: absolute; /*.headerNavOuterを基準にして、絶対配置*/ right: 0; top: 0; width: 55px; height: 55px; cursor: pointer; z-index: 30; } .hamburger_line { position: absolute; /*.headerNavOuterを基準にして、絶対配置*/ left: 8px; width: 25px; height: 1px; background-color: #fff; -webkit-transition: all 0.6s; transition: all 0.6s; } .hamburger_line_1 { top: 20px; } .hamburger_line_2 { top: 26px; } .hamburger_line_3 { top: 32px; } /* End ハンバーガーボタン(三本線の実装) */ /* Start ハンバーガーボタンをクリックした際の動き */ /* ナビゲーションが現れる */ .nav-open .headerNav { top: -10px; display: block; } /* 三本線のハンバーガーを、バッテンにします */ .nav-open .hamburger_line_1 { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 25px; } .nav-open .hamburger_line_2 { width: 0; left: 50%; } .nav-open .hamburger_line_3 { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 25px; } /* End ハンバーガーボタンをクリックした際の動き */ /* ---------------------- End ハンバーガーメニュー ---------------------- */ ``` ```Javascript function toggleNav() { let body = document.body; let hamburger = document.getElementById('js-hamburger'); hamburger.addEventListener('click', function() { body.classList.toggle('nav-open'); }); } toggleNav(); ```

	@@ -1 +1 @@
1	- ハンバーガーメニュー~~のスタ~~ー~~ト位置~~の指定
1	+ ハンバーガーメニューをヘッダーの下から出す

質問編集履歴