javascriptによるメニュー表示の不具合

Question

前提・実現したいこと

javascriptでハンバーガーメニューを実装しようとしています。
仕様としましては、
①ハンバーガーのボタンをクリックすると、
②画面いっぱいにメニューが表示される。
③メニュー内の「メニューを閉じる」をクリックすると、
④メニューが閉じる。

発生している問題・エラーメッセージ

実行結果は、ハンバーガーのボタンをクリックし、メニューを閉じるを押すとメニューが閉じるようになりました。
しかし、その動作は一回目だけで、一度メニューを閉じた後、ハンバーガーボタンをクリックしてもメニューが表示されなくなってしまいました。

原因などヒントをいただければと思います。

該当のソースコード

<!--ハンバーガーボタンが表示されるところ-->
<nav id="nav-prac-sp">
  <div class="nav-container flex-container">
   <a href="#"><img src="images/logonav.png"></a>
   <img id="hamBtn" src="images/menu.png">
  </div>
</nav>

<!--ハンバーガーメニューが表示されるところ-->
<nav id="nav-prac-sp-hamburger">
  <div class="hamburger-container">
    <p id="hamburger-close">メニューを閉じる</p>
    <ul class="hamburger-menu">
     <li>トップページ</li>
     <li>店舗情報</li>
     <li>会社概要</li>
     <li>ご注文・お問い合わせ</li>
    </ul>
  </div>
</nav>

/*メニュー本体（抜粋）*/
#nav-prac-sp-hamburger {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   background-color: black;
   color: white;
   position: fixed;
   z-index: 99;
   width: 100%;
   height: 100vh;
   box-sizing: border-box;
   margin: 0;
   background: rgba(0, 0, 0, 0.95);
   font-size: 20.8px;
 }

/*メニュー開閉操作*/
 #nav-prac-sp-hamburger.open {
   display: block;
   z-index: 99;
   animation: showNav .5s ease 0s 1 normal;
 }
 #nav-prac-sp-hamburger.close {
   display: block;
   opacity: 0;
   animation: hideNav .5s ease 0s 1 normal;
 }

 @keyframes showNav {
   0% {
    opacity: 0;
   } 
   100% {
    opacity: 1;
   }
 }
 
 @keyframes hideNav {
   0% {
    opacity: 1;
    z-index: 99;
   }
   100% {
    opacity: 0;
    z-index: -1;
   }
 }
 

 //ハンバーガーボタン
 var hamBtn = document.getElementById('hamBtn');
 //メニューを閉じるボタン
 var hamburgerClose = document.getElementById('hamburger-close');

 
 //メニューを開く関数
function open() {
   //ハンバーガーメニュー自体
  var hamburger = document.getElementById('nav-prac-sp-hamburger');
  //ハンバーガーメニューからcloseを除き, openを付与
  hamburger.classList.remove('close');
  hamburger.classList.add('open');
 } 
 
function close() {
  var hamburger = document.getElementById('nav-prac-sp-hamburger');
  //ハンバーガーメニューからopenを除き, closeを付与
  hamburger.classList.remove('open');
  hamburger.classList.add('close');
 }
 
 //ハンバーガーボタンを押すと開く
hamBtn.addEventListener('click', open);
hamburgerClose.addEventListener('click', close);

Comments

[jun68ykt]

ご質問にCSSも追記したほうがよいかもしれません。

[a10]

すみません、cssが抜けていました。質問文に追加いたしました。ご指摘感謝いたします。

[jun68ykt]

スタイルの追加、ありがとうございます。回答しました。参考になれば幸いです。

Answer 1

スタイルの以下の３箇所を修正してみると、いかがでしょうか？

(1) #nav-prac-sp-hamburger のスタイルに含まれる z-index: -1; をコメントアウト
(2) #nav-prac-sp-hamburger のスタイルに含まれる z-index: 99; をコメントアウト
(3) #nav-prac-sp-hamburger.close のスタイルに、 z-index: -1; を追加

以下は、ご質問に挙げられている HTML, CSS, javascript を転記し、かつ、スタイルについては上記3点の修正をしたものです。（※logonav.pngのリンクは本題と関係ないので、HTMLをコメントアウトしています。）

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/PowGdZp

Comments

[a10]

無事に動作しました！わかりやすいご回答本当にありがとうございました。