ドロワーメニューのTopへを押すとリストのフェードアウトが表示されて困っています。

Question

前提・実現したいこと

TOPへを押したときにliが残らないようにしたい。
かつ、liの文字が二重にならないようにしたい。

###詳細

WordPressを使用し、ポートフォリオサイトを製作中です。
header.phpのハンバーガーを利用したドロワーメニューにてTopへを押す、もしくはスクロールしてTopへ戻るとフェードアウトが表示されてしまう問題が起きています。

作成ベースとしては動くWebデザインアイディア帳の
「グローバルナビゲーション　-クリックしたら円形背景が拡大（右上から）-」
https://coco-factory.jp/ugokuweb/move01/5-1-20/
をベースとしています。

試したこと

①まず最初に、実機・検証ともに、一定数のスクロールをするとliの文字が二重になっておりました。
これはPC用navで採用している「一定数スクロールするとnavを表示する」がSP用navにも効いてしまっていることが原因だと思われます。
これを解除するのに、PCとSPでnavを別々にネストすることにしました。

②navを別々にネストすることで文字が二重になることは改善されましたが、ハンバーガーボタンをタップし、表示されるドロワーメニューのTOPへ戻るボタンをタップすると、左上にliフェードアウトで表示されるようになってしまいました。
こちらはファーストビューでnavを表示させない（「一定数スクロールするとnavが表示される」の反対に「TOPではnavが消える」）が効いているものと思われます。

ただ、どちらもPC用navはdisplay:none;をかけていますし、検証してもフェードアウトしてしまうので、どれが悪さをしているのかわかりませんでした…

IDのgnavをclassに変えるとハンバーガーが動作しなくなってしまうため、該当箇所のtransition等変更してみましたが、改善できなかったため質問させていただきます。

該当のソースコード

<nav id="gnav">
  <ul class="gnav_sp">
    <li class="li"><a href="#design">Design</a></li>
    <li class="li"><a href="#skill">Skill</a></li>
    <li class="li"><a href="#profile">Profile</a></li>
    <li class="li"><a href="#contact">Contact</a></li>
    <li class="li"><a href="#">Top</a></li>
  </ul>
  <div class="openbtn"></div>
  <div class="circle-bg"></div>
  <div class="gnav_pc">
    <ul>
      <li><a href="#design">Design</a></li>
      <li><a href="#skill">Skill</a></li>
      <li><a href="#profile">Profile</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#">Top</a></li>
    </ul>
  </div>
</nav>

#gnav ul {
    opacity: 0; /*はじめは透過0*/
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -3
  }
  /*背景が出現後にナビゲーションを表示*/
  #gnav.panelactive ul {
    opacity: 0.9;
    z-index: 1000;
  }
  /* 背景が出現後にナビゲーション li を表示*/
  #gnav.panelactive ul li {
    animation-name: gnaviAnime;
    animation-duration: 1s;
    animation-delay: .1s; /*0.2 秒遅らせて出現*/
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes gnaviAnime {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  /*丸の拡大*/
  .circle-bg {
    position: fixed;
    z-index: 3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #FFDDEE;
    /*丸のスタート位置と形状*/
    transform: scale(0); /*scaleをはじめは0に*/
    right: 20px;
    top: 20px;
    transition: all .5s; /*0.6秒かけてアニメーション*/
  }
  .circle-bg.circleactive {
    transform: scale(50); /*クラスが付与されたらscaleを拡大*/
  }
  /*アクティブになったエリア*/
  #gnav.panelactive {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    top: 0;
    width: 100%;
    height: 100vh;
  }
  /*リストのレイアウト設定*/
  #gnav  li {
    text-align: center;
    list-style: none;
    width: 100vw;
  }
  #gnav ul li a {
    color: #333;
    padding: 15px;
    display: block;
    font-family: tbcinergothic-std, sans-serif;
    letter-spacing: 0.1em;
    font-weight: bold;
    position: relative;
    bottom: 30px;
  }
  #gnav ul li a:hover {
    background: rgba(255, 255, 255, 0.8);
    transition: 0.5s;
  }
}

/*ナビゲーション途中から*/
$(function () {
  var topBtn = $('.gnav_pc');
  topBtn.hide();
  //スクロールがに達したらボタン表示
  $(window).scroll(function () {
    if ($(this).scrollTop() > 450) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
});

ハンバーガー

<script>
jQuery(".openbtn").click(function () { //ボタンがクリックされたら
jQuery(this).toggleClass('active'); //ボタン自身に activeクラスを付与し
  jQuery("#gnav").toggleClass('panelactive'); //ナビゲーションにpanelactiveクラスを付与
 jQuery(".circle-bg").toggleClass('circleactive'); //丸背景にcircleactiveクラスを付与
});

jQuery("#gnav a").click(function () { //ナビゲーションのリンクがクリックされたら
  jQuery(".openbtn").removeClass('active'); //ボタンの activeクラスを除去し
  jQuery("#gnav").removeClass('panelactive'); //ナビゲーションのpanelactiveクラスを除去
 jQuery(".circle-bg").removeClass('circleactive'); //丸背景のcircleactiveクラスを除去
});</script>

補足情報（FW/ツールのバージョンなど）

DWを使用、WordPressは５．８．１。
スクロールで表示するjQueryはcommons.phpで記述していますが、ハンバーガーは動作しなかったためhome.phpに記述しています。
また、別リンクでのモーダルのcssとの兼ね合いでfunctionsではなくphpでcssを読み込ませています。

初心者のためわかりやすくお伝えできればと思いましたが、足りない情報等あればお答えしますのでよろしくお願いいたします。

Comments

[k_a]

> ハンバーガーボタンをタップし、表示されるドロワーメニューのTOPへ戻るボタンをタップすると、左上にliフェードアウトで表示されるようになってしまいました。

上記現象が再現（理解）できませんでした。
jsfiddle(https://jsfiddle.net/)等を用いて現象を再現できる環境を共有していただけると、他の方の回答につながるかと思います。

また、スマホ用PC用の要素を用意すること自体はよくあることですが、両方とも同時に表示をさせておくのはあまり得策ではありません。ユーザーエージェント等でアクセス環境を判断するのが良いかと思います。

[chinya_pink]

コメントありがとうございます。
使ってみたのですが、WordPressで悪さをしているのか、他のコードが干渉しているのかは分かりませんが、こちらでは確認できませんでした。
（https://jsfiddle.net/ndL0y9h1/18/）

ユーザーエージェントについては調べて理解ができたのですが、URLを別途用意した方がいいということでしょうか？

[k_a]

お力にはなれませんでしたが解決したようで何よりです。

ユーザーエージェントですが、URLを別途用意というわけではありません。該当ページにアクセスしたのがPCならPC用のnavを、スマホ（+タブレットも？）ならスマホ用のnavをページ内に表示するようにするということです。
なぜPC用とスマホ用のnavを分けているのかわかりませんが、今回のコードだとnavの構造自体に違いはあまり無い様に見えますので、ユーザーエージェントに応じてjsからクラスを付与するのが良いように思えます。

とはいえ現状で意図通り動いているのであれば特に変更する必要もありません。
また今回の例だと、ユーザーエージェントではなくメディアクエリなどで単純にスクリーンの幅に応じてCSSを切り替える方が適しているかもしれません。

[chinya_pink]

とんでもないです！ありがとうございました！
今回<nav>の中にclassで別表示で両方ネストすると文字が二重になる謎の現象が起きていたために別でネストをしていました。
jsにメディアクエリをかける、という感覚でいいのでしょうか？
そういった発想はなかったのでもしまたjs絡みで変な挙動が起きたら試してみようと思います！
また質問することもあると思うので、また目に止まったらよろしくお願いいたします。
ありがとうございました！

Answer 1

.gnav_pc {
display:none;
}
ではなく、
visibility: hidden;にしたら解決いたしました…
（ちなみにbackground-color: transparent;ではダメでした）

閲覧していただいた方、質問していただいた方ありがとうございました。