タイトルが２つ表示されてしまう
「しょーご中級」では、レスポンシブでハンバーガーメニューを作ります。
すると、下のようにハンバーガーを開いた時に、タイトルが２つ表示されてしまいました。
動画で見ると、下のようになります。
ヘッダーの左にあるタイトル部分（ロゴとサイトタイトル）がそのまま下にスライドして、
タイトルが上にも下にも２つ表示されて、変なことに気づくと思います。
今回は、ハンバーガーを開いた時は非表示にし、
閉じた時は表示する方法を説明します。
jQueryを見てみる
今のjQueryのコードを見ると、下記のようになっています。
ボタン（nav-button）をクリックし、
ハンバーガーが開いていたら、slideUpで縮み、
開いていなかったら、elseの所でslideDownで開くように分岐しています。
開いたら、非表示（hide）にする
ですので、slideDownしたら、タイトル部分は非表示にする文を加えます。
色が変わっている所です。
navGlobalを非表示（hide）します。
すると、下の動画のようになります。
消えました！
でも、よく見ると、閉じた時も消えたままなのが分かります。
閉じたら、表示（show）する
そこで、閉じた時は表示されるようにします。
色の変わっている所です。
閉じたら（slideUp）、表示（show）します。
すると、下の動画のようになります。
開いた時は非表示になり、
閉じた時は表示されました。
まとめ
コーディングを始めて、jQueryにまだ抵抗のある人がいると思います。
（私がそうですが。。。）
上から順に読み込まれることを忘れず、
今回は、hideとshowの１文を１つずつ加えることを紹介しました。
コメント