タイトルが2つ表示されてしまう
「しょーご中級」では、レスポンシブでハンバーガーメニューを作ります。
すると、下のようにハンバーガーを開いた時に、タイトルが2つ表示されてしまいました。

動画で見ると、下のようになります。
ヘッダーの左にあるタイトル部分(ロゴとサイトタイトル)がそのまま下にスライドして、
タイトルが上にも下にも2つ表示されて、変なことに気づくと思います。
今回は、ハンバーガーを開いた時は非表示にし、
閉じた時は表示する方法を説明します。
jQueryを見てみる
今のjQueryのコードを見ると、下記のようになっています。

ボタン(nav-button)をクリックし、
ハンバーガーが開いていたら、slideUpで縮み、
開いていなかったら、elseの所でslideDownで開くように分岐しています。
開いたら、非表示(hide)にする
ですので、slideDownしたら、タイトル部分は非表示にする文を加えます。

色が変わっている所です。
navGlobalを非表示(hide)します。
すると、下の動画のようになります。
消えました!
でも、よく見ると、閉じた時も消えたままなのが分かります。
閉じたら、表示(show)する
そこで、閉じた時は表示されるようにします。

色の変わっている所です。
閉じたら(slideUp)、表示(show)します。
すると、下の動画のようになります。
開いた時は非表示になり、
閉じた時は表示されました。
まとめ
コーディングを始めて、jQueryにまだ抵抗のある人がいると思います。
(私がそうですが。。。)
上から順に読み込まれることを忘れず、
今回は、hideとshowの1文を1つずつ加えることを紹介しました。
コメント