三本線からバツ印へ

jQuery

こんにちは、ゆんつです。

スマホでWebサイトをみていると、画面の右上や左上などにメニュー画面を表示させるための3本線をよく見かけると思います。

この三本線。

見た目がハンバーガーに似ていることから「ハンバーガーメニュー」と言われるそうです。

ゆんつ
ゆんつ

似てるかなぁ?

まあハンバーガーに似てるか似てないかは置いておくとして、この3本線はHTMLとCSSで簡単に作ることが出来ます。

今日はハンバーガーメニューの三本線を作り、その三本線をクリックしたら三本線からバツ印に変形する方法について書いておきます。

スポンサーリンク

三本線を作る

作り方は簡単です

横棒を3つ作り、それをpositionを使って等間隔に並べればいいだけです。

3つの横棒の作り方は以下のようなHTMLの構造で


<div>
  <span></span>
  <span></span>
  <span></span>
</div>

各span要素を横棒にすることで作成します。

実際につくってみます。

See the Pen hamburger1 by konpure (@yuntu) on CodePen.0

三本線の各色は変えています。

線の位置調整に少し手間がかかるだけで割と簡単です。

三本線をバツ印に変形させる

実際のWebサイトでは三本線をクリックするとメニューが開いてバツ印になり、再びクリックするとバツ印から再び三本線になることが多いです。

ですのでハンバーガーメニューがクリックされたら×印に変形するようにします。

考え方としては、

・jQueryでハンバーガーメニューがクリックされた時のイベントを付ける

・ハンバーガーメニューがクリックされたら真ん中の線は透明化して見えないようにする

・ハンバーガーメニューがクリックされたら上下の線は中央に移動し、クロスしてバツ印を作るようにする。

という感じで作りたいと思います。

See the Pen hamburger2 by konpure (@yuntu) on CodePen.0

ハンバーガーメニューをクリックしてみてください。

ハンバーガーメニューをクリックすると三本線が×印になり、もう一度クリックすると再び三本線に戻ります。

「三本線をクリックしたらバツになるハンバーガーメニュー」の完成です。

ゆんつ
ゆんつ

簡単

あとはこれを画面全体を覆うオーバーレイメニューと組み合わせることで、ハンバーガーメニューをクリックすると画面いっぱいにメニューが開いて、もう一度クリックするとメニューが閉じるスマホなどで見慣れた画面を作ることが出来ます。

オーバーレイメニューについてはまたいずれ。

それでは、またですー。

jQuery
ゆんつをフォローする
スポンサーリンク
スポンサーリンク
こんぷれ

コメント

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