ハンバーガーメニューをヘッダーの下から出す

Question

前提・実現したいこと

HTML、CSSの勉強でサンプルページを真似していて、ハンバーガーメニュー自体はできていて、ヘッダーの下からニョキっとメニューバーを出現させるためのスタート位置の指定もできているのですが、最初からメニューバーが出現してしまいます。
メニューバーがない状態からハンバーガーボタンを押したときにメニューバーが出るようにするにはどうすればいいでしょうか？

真似をしているサンプルページ

該当のソースコード

<header class="body-header">
            <div class="body-header-left">
                <img src="images/logo.png" alt="">
            </div>              
            <!-- ナビゲーション -->
        <nav class="headerNav">
            <ul class="navList">
                <li class="navItem">
                    <a href="#" class="hoverFloatBtn">
                        TOP
                    </a>
                </li>
                <li class="navItem">
                    <a href="#" class="hoverFloatBtn">
                        MESSAGE
                    </a>
                </li>
                <li class="navItem">
                    <a href="#" class="hoverFloatBtn">
                        GALLERY
                    </a>
                </li>
                <li class="navItem">
                    <a href="#" class="hoverFloatBtn">
                        BRAND
                    </a>
                </li>
                <li class="navItem">
                    <a href="#" class="hoverFloatBtn">
                        PROJECT
                    </a>
                </li>
                <li class="navItem">
                    <a href="#" class="hoverFloatBtn">
                        COMPANY
                    </a>
                </li>
            </ul>
        </nav>
    
        <!-- ハンバーガーボタン -->
        <div class="hamburger_btn" id="js-hamburger">
            <span class="hamburger_line hamburger_line_1"></span>
            <span class="hamburger_line hamburger_line_2"></span>
            <span class="hamburger_line hamburger_line_3"></span>
        </div>
    </div>
    </header>
    <!-- End header -->      
        </header>

/*
----------------------
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 ハンバーガーメニュー
----------------------
*/

function toggleNav() {
  let body = document.body;
  let hamburger = document.getElementById('js-hamburger');

  hamburger.addEventListener('click', function() {
    body.classList.toggle('nav-open');
  });
}
  toggleNav();