スマホサイズの際に勝手に開くnavを、開かないようにしたい。

Question

=========
HTML
=========


	<nav class="NavMenu">
		<ul>
			<li><a href="#">Menu1</a></li>
			<li><a href="#">Menu2</a></li>
			<li><a href="#">Menu3</a></li>
			<li><a href="#">Menu4</a></li>
			<li><a href="#">Menu5</a></li>
		</ul>
		</nav>
		<!-- ハンバーガーメニュー部分 --> 
		<div class="Toggle">
			<span></span>
			<span></span>
			<span></span>
		</div>



=========
CSS
=========



@media screen and (max-width:960px){
/*ナビメニューのスタイルを指定*/
nav.NavMenu{
   position: fixed; /*表示位置を固定*/
   z-index: 2; /*重ね順を変更*/
  top: 0; /*表示位置を指定*/
  left: 0; /*表示位置を指定*/
  background: #fff;/*背景を白にする*/
  color: #000; /*文字色を黒にする*/
  text-align: center; /*テキストを中央揃え*/
  width: 100%; /*全幅表示*/
  transform: translateY(-100%); /*ナビを上に隠す*/
  transition: all 0.6s; /*アニメーションの時間を指定*/
  }
  
  nav.NavMenu ul{
  background: #ccc; /*背景をグレーにする*/
  width: 100%;
  margin: 0 auto;
  padding: 0;
  }
  
  nav.NavMenu ul li{
  font-size: 1.1em;
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px dotted #333;
  }
  
  nav.NavMenu ul li:last-child{
  padding-bottom: 0;
  border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
  }
  
  nav.NavMenu ul li a{
  display: block; /*クリックできる領域を広げる*/
  color: #000;
  padding: 1em 0;
  }
  /*トグルボタンが押されたときに付与するクラス*/
  nav.NavMenu.active{
  transform: translateY(0%);
  }
  /*トグルボタンのスタイルを指定*/
  .Toggle {
      display: block;
      position: fixed;    /* bodyに対しての絶対位置指定 */
      right: 13px;
      top: 12px;
      width: 42px;
      height: 42px;
      cursor: pointer;
      z-index: 3;
  }
   
  .Toggle span {
      display: block;
      position: absolute;
      width: 30px;
      border-bottom: solid 3px #000;
      -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
      -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
      transition: .35s ease-in-out;			/*変化の速度を指定*/
      left: 6px;
  }
   
  .Toggle span:nth-child(1) {
      top: 9px;
  }
   
  .Toggle span:nth-child(2) {
      top: 18px;
  }
   
  .Toggle span:nth-child(3) {
      top: 27px;
  }
   
  /* 最初のspanをマイナス45度に */
  .Toggle.active span:nth-child(1) {
      top: 18px;
      left: 6px;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }
   
  /* 2番目と3番目のspanを45度に */
  .Toggle.active span:nth-child(2),
  .Toggle.active span:nth-child(3) {
      top: 18px;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      transform: rotate(45deg);
  }
}



=========
JS
=========



    $(function() {
        $('.Toggle').click(function() {
            $(this).toggleClass('active');
        
        if ($(this).hasClass('active')) {
            $('.NavMenu').addClass('active'); //クラスを付与
            } else {
                $('.NavMenu').removeClass('active'); //クラスを外す
            }
            });
        });

下記のコードを実行すると、960px以下のときにnavがhamburgerメニューになるのですが
ボタンを押してなくても、縮めたときの初動で、勝手に開いている状態になってしまってます。
最初から動かないようにしたいのですが、どうすればいいのでしょうか？？

====================================================================================

Comments

[miyabi_pudding]

コードは、マークダウン方式で、コードブロックを使って、記載してください。質問本文は編集できます。
<code>ボタンを押して、記入される文字列の中に記載ください。

[hoge_nakatani]

編集いたしました。
お手数おかけいたしました。

Answer 1

なんだか、CSSアニメーションの登竜門みたいな質問で微笑ましくなりました。

実は、transitonを使ったアニメーションの仕様の難しいところで、
初動と、後のアニメーションに差をつけれないところが扱い難しいんですよね。

下記でいかがでしょうか。
（CSSは、内容変えたブロックのみ入れてます）

/*ナビメニューのスタイルを指定*/
nav.NavMenu{
  position: fixed; /*表示位置を固定*/
  z-index: 2; /*重ね順を変更*/
  top: 0; /*表示位置を指定*/
  left: 0; /*表示位置を指定*/
  background: #fff;/*背景を白にする*/
  color: #000; /*文字色を黒にする*/
  text-align: center; /*テキストを中央揃え*/
  width: 100%; /*全幅表示*/
  transform: translateY(-100%); /*ナビを上に隠す*/
  /* 下記が変更点 */
  /* heightに0を効かせ、アニメーション外で初期を非表示とした */
  height: 0;
  /* height 0の時、表示されないようにした */
  overflow: hidden;
  /* アニメーションを適用するプロパティを、transformのみにした */
  transition: transform 0.6s; /*アニメーションの時間を指定*/
}

/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active{
  /* アニメーション外のheightを、アクティブの時はautoで、中身を表示するようにした */
  height: auto;
  transform: translateY(0%);
}

$(function() {

// .NavMenuのtransitionに効かせている、アニメーション時間を動的にとるための変数を用意
const navDom = $('.NavMenu').get(0);
const navStyle = window.getComputedStyle(navDom);
// 画面幅が、960px以上だと、0か、数値にならないとなるので、その場合は、600が入るようにした。
const navTransitionDuration = (isNaN(parseFloat(navStyle.transitionDuration)) || parseFloat(navStyle.transitionDuration) == 0 ? 0.6 : parseFloat(navStyle.transitionDuration)) * 1000;
// heightに効かせたインナースタイルをタイミングよく解除するためのタイマーを用意
let classDelTimer = null;

$('.Toggle').click(function() {
  $(this).toggleClass('active');
    if ($(this).hasClass('active')) {
      // heightのインナースタイルを解除しつつ、activeクラスを付与
      $('.NavMenu').css('height', '').addClass('active'); //クラスを付与
    } else {
      // クラスを外す時、強制的に表示状態を保つため、heightのインナースタイルを効かせつつ、クラスを外す。
      $('.NavMenu').css('height', 'auto').removeClass('active'); //クラスを外す
      // transitionアニメーションが終了したタイミングで、heightインナースタイルを外すようタイターセット
      if (classDelTimer) {
        clearTimeout(classDelTimer);
      }
      // transition時間プラス0.1秒とすることで、処理遅延が多少出ても、違和感をなくせる
      classDelTimer = setTimeout(function(){
        $('.NavMenu').css('height', '');
      }, navTransitionDuration + 100);
    }
  });
});

やったこととしては、アニメーションの対象を、transformのみに限定したのと、
heightにて表示非表示自体をコントロールするように変え、
javascriptの方で、heightのタイミングなどをコントロールするよう変えました。
ひとまず、chromeでは期待通りの動きとなっていると思います。

他、モダンブラウザでうまくいかないなどありましたら、コメントいただければと思います。

Comments

[hoge_nakatani]

ありがとうございます！
確認したところ、動きませんでした。

[miyabi_pudding]

動かなかったとは、何が、どう動かなかったのでしょうか？
ひとまず、私の環境、（macOS Chrome、FireFox）では意図した通りにナビゲーションの初動は抑えられているので、
ブラウザを教えてください。
もし、Chromeなのであれば、
他に書いているCSS、HTML、JavaScriptが干渉している可能性もありますので、
質問文に追記をお願いします。