ハンバーガーメニューが開いたままになっている・レスポンシブ

Question

もうお手上げです。
レスポンシブ対応画面を作っています。
ハンバーガーメニューをclickしたら、バツ印になるってとこまでできました。

しかし、デフォルトの状態が、バツ印の状態です。
clickしたらハンバーガーメニューに戻ります。

当然ですが、やりたいことは逆なんです。
デフォルトがハンバーガーメニューで、clickしたらバツ印になるようにしたいんです。

宜しくお願いします。

 <div id="drawer_toggle" class="open">
            <span></span>
            <span></span>
            <span></span>
          </div>

<script>
      $(function () {
        $("#drawer_toggle").click(function () {
          $(this).toggleClass("open");
          $("#global_nav").slideToggle(230);
        });
      });
    </script>

  .header {
    #drawer_toggle {
      z-index: 200;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      right: 0;
      display: inline-block;
      width: 50px;
      height: 50px;
    }
    #drawer_toggle:hover {
      //ホバー時にテキストの色やカーソルを変える
      cursor: pointer;
    }

  
    #drawer_toggle span {
      position: absolute;
      top: 19px;
      left: 17px;
      display: inline-block;
      width: 23px;
      height: 2px;
      border-radius: 2px;
      background-color: #2498b3;
      vertical-align: top;
    }
  
    #drawer_toggle span:nth-child(2) {
      margin-top: 10px;
    }
    #drawer_toggle span:last-child {
      margin-top: 20px;
    }
    #drawer_toggle.open {
      background-color: #2498b3;
    }

    #drawer_toggle.open span {
      top: 24px;
      left: 14px;
      width: 23px;
      margin: 0;
    }
    #drawer_toggle.open span:first-child {
      transform: rotate(45deg);
      background-color: #fff;
    }
    #drawer_toggle.open span:nth-child(2) {
      display: none;
    }
    #drawer_toggle.open span:last-child {
      transform: rotate(-45deg);
      background-color: #fff;
    }
   
    #global_nav {
        display: none;
        position: absolute;
        top: 50px;
        width: 100%;
        //@include hamburger{ 消去
         display: block; 
        //}; 消去
      }

Comments

[BeatStar]

解決したのなら『ベストアンサー』を選びましょう。

Answer 1

<div id="drawer_toggle" class="open">

class="open"を消しましょう。

#global_nav {
display: none;
position: absolute;
top: 50px;
width: 100%;
//@include hamburger{ 消去
display: block;
//}; 消去
}

display: block;を消しましょう。

Comments

[B_J]

本当にありがとうございます。
解決できましたが、なにがなんだか、なぜなのか全く分かりません。。
お時間いただきまして、大変申し訳ございませんが、詳しくご説明・ご解説を賜れますでしょうか？？
何卒よろしくお願い申し上げます。

[itagagaki]

ご自身で書かれたコードではないのですか？？

ハンバーガーとバツの切り替えは id="drawer_toggle" のdiv要素に、JQueryでクラス "open" をトグル（付けたり外したり）することで行っていますね。"open" が付いた状態ではバツが、ついていない状態ではハンバーガーが表示されるようにCSSでデザインされていますね。初期状態で表示をハンバーガーにしたいのなら、そのdiv要素の初期状態は "open" クラスが付いていない状態にすればいいわけですよね。

そして、メニュー項目については id="global_nav" の要素を jQuery の slideToggle で表示する／隠すを切り替えていますね。初期状態では隠しておきたいのだからCSSで display: none; にしておけばよいのですが（そしてそれが書かれていますが、その下に） display: block; が書かれているので、それでは最初から表示状態になってしまいます。

[B_J]

ありがとうございます。
サイトやYouTubeを参考にして書きましたので、理解が足りなかったと思います。
メニュー設定もして、ハンバーガーメニューをクリックすると、メニューが表示されるように出きました。
今日は寝て明日、整理してみます。感謝感激雨嵐です。

[B_J]

おはようございます。
openのクラスでは×、ついていない時はハンバーガーとCSSで設定➡ここまでは分かります。

初期状態で表示をハンバーガーにしたいのなら、そのdiv要素の初期状態は "open" クラスが付いていない状態にすればいい➡これでhtmlのクラスからopenを削除したことで、なぜうまくいくのかいまいちぴんときません。これを削除しちゃうと、CSSで設定している、.openなどは影響を受けないのでしょうか？

いまいち分かっておらずすみません。。

[itagagaki]

> htmlのクラスからopenを削除
htmlのクラスではありません。div要素から"open"クラスを削除です。
http://www.jquerystudy.info/reference/attributes/toggleClass.html
こちらを参照してください。
> toggleClassは指定したクラスをトグル処理（クラスが有る場合はクラスを削除し、無い場合はクラスを追加します）します。
プログラムを書く以上は、使う関数のリファレンスくらいはちゃんと読んで理解してコーディングしましょう。

[B_J]

ありがとうございます。URLもありがとうございます、拝見しました。

ということは、コード上、openというクラスが「有る」今回のような場合は、クラスを削除ということですよね？

今回の私の場合だと、クラスopenがあるので、
クリックすることで、openクラスが削除される＝openではない状態＝ハンバーガーメニュー
➡クリックするとハンバーガーメニューの状態になる

ということではないのでしょうか？

でも、クリックすると、ハンバーガーメニュー「ではない」状態にしたのですよね？

それと、htmlの中のclassを削除したこととの関係はどういうことなのでしょうか？

このあたりがいまいち理解できないです。ご教示のほどよろしくお願いします。

[B_J]

あ、すみません、もう一度考えました。

クラスというのは、htmlの中にあるdivのクラスのことですかね？そうするとしっくりきました。

つまり、今回はもともとopenクラスの記載が「有った」からこそ、
クリックするとopenが削除＝openではない状態＝ハンバーガー➡つまり、クリックするとハンバーガーメニューになる＝今回の悩み

しかし、教えて頂いた通り、html内にあるdivクラスにあるopenをそもそも削除＝クリックするとopenを追加➡つまり、クリックするとハンバーガーが開く状態になる

ということですかね？

[itagagaki]

まあ、大体合っています。