質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.45%

  • JavaScript

    21057questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11919questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8384questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    7825questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 118

ke_a

score 3

=========
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メニューになるのですが
ボタンを押してなくても、縮めたときの初動で、勝手に開いている状態になってしまってます。
最初から動かないようにしたいのですが、どうすればいいのでしょうか??

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2019/06/11 22:11

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

    キャンセル

  • ke_a

    2019/06/11 23:16

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

    キャンセル

回答 1

0

なんだか、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では期待通りの動きとなっていると思います。

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/17 22:29

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

    キャンセル

  • 2019/06/17 23:18 編集

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21057questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11919questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    8384questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    7825questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。