ハンバーガーメニュー 表示と非表示を繰り返す

html&css
ハンバーガーメニュー

タイトルが2つ表示されてしまう

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

タイトル部分が2つ

動画で見ると、下のようになります。


ヘッダーの左にあるタイトル部分(ロゴとサイトタイトル)がそのまま下にスライドして、
タイトルが上にも下にも2つ表示されて、変なことに気づくと思います。


今回は、ハンバーガーを開いた時は非表示にし、
閉じた時は表示する方法を説明します。

jQueryを見てみる

今のjQueryのコードを見ると、下記のようになっています。

ボタン(nav-button)をクリックし、
ハンバーガーが開いていたら、slideUpで縮み
開いていなかったら、elseの所でslideDownで開くように分岐しています。

開いたら、非表示(hide)にする

ですので、slideDownしたら、タイトル部分は非表示にする文を加えます。

hideで非表示

色が変わっている所です。
navGlobalを非表示(hide)します。

すると、下の動画のようになります。

消えました!
でも、よく見ると、閉じた時も消えたままなのが分かります。

閉じたら、表示(show)する

そこで、閉じた時は表示されるようにします。

showで表示

色の変わっている所です。
閉じたら(slideUp)、表示(show)します。

すると、下の動画のようになります。

開いた時は非表示になり、
閉じた時は表示されました。

まとめ

コーディングを始めて、jQueryにまだ抵抗のある人がいると思います。
(私がそうですが。。。)

上から順に読み込まれることを忘れず、
今回は、hideshowの1文を1つずつ加えることを紹介しました。

コメント

タイトルとURLをコピーしました