【CSS/JavaScript】ハンバーガーメニュー自作の手順

投稿日:

【Rails】プログラミング初心者の勉強ブログ #61

ハンバーガーメニューを自作したい。Bootstrapやプラグインではなく、CSSとJSを使い、オリジナルハンバーガーメニューを作るためには、どのタイミングで、どのようなコードが必要になるかを実在サイトをもとに考察しました。

 

目次

 

はじめに

今回のハンバーガーメニュー考察は、実在するサイトにお邪魔して、ディベロッパーツールでコードを確認しながら仕組みを理解していくことに努めております。

参考サイト

シザーケース専門店 sacra HP

 

「実際のメニューの画像」

 

  1. バーガーメニューアイコンをクリック
  2. メニューが表示される
  3. 閉じるボタンでもとの画面に戻る

 

こちらのHPのハンバーガーメニューを参考に、どのような仕組みで上のメニューがコーディングされているかを考察します。

 

ハンバーガーメニューの仕組み

まず、一連のメニュー表示の流れの、どの要素にCSSとJavaScriptが使用されているかをまとめます。CSS使用部分とJS使用部分を一旦整理して考えていきます。

 

JavaScriptの使用箇所

今回のメニューにおいて、JSを使用する点は、大まかに以下の3つでした。

①、バーガーメニューアイコンのクリック時アクション設定

まず、最初の「三」の字のアイコンがクリックされた時のアクションを定義する必要があります。このクリック時のアクションに、「要素にクラスを追加する関数」を定義することで、追加で付与されたクラスに当てた、もともとコーディングしておいたCSSが作用し、アニメーションが起動する流れです。

 

②、①のクリック時のタイミングとずらしてクラスを付与する設定

①のアクション設定は、別途関数を定義をしない限り、クリック時と同タイミングで、設定した全てのアクションが行われることになります。しかし、今回のメニューは、最初のクリックで、背景がグレーからピンクに変わり、その数秒後に白い文字が表示されております。

※クリックタイミングと、白い文字表示タイミングがずれてます。このような「アクションのタイミング」の設定は、JSの「setTimeout関数」で設定を行うことができます。

 

③、「×」印の閉じるボタンのクリック時アクション設定

こちらもクリック時アクションをJSで定義し、①で設定した際に付与したクラスを取り払うことで、もとの状態に戻すと言った流れになります。あらかじめ設定したCSSのクラスを付けたり外したりすることで、表示の変化を生み出すイメージです。

 

実際のコーディング

nav.html(抜粋)

 

nav.js

※openとcloseクラスにアニメーション設定がコーディングされてます。詳細は一番下のcssのコードで確認ください。

※「.nav、.sacra-logo-sp、.nav-sns-sp、.icon-close、.nav-sublink-sp」の各クラスは、メニュー内のアイコンやリンク、文字の要素のクラスです。

 

 

CSSの使用箇所

上に書いたJS使用箇所以外は、全てCSSの設定です。アニメーションは全てCSSです。このメニューバーJSのコードよりもCSSのコードの方が、複雑に作り込まれておりました。今回は特に特徴的であった2つのCSSアニメーション2つを取り上げてまとめます。

 

①、メニュー背景を3つに分け、白とピンクの背景色を段階的に表示する設定

この背景が三段階で移動して変わるアニメーション、最初見たとき仕組みが全く想像できなかったのですが、コードを確認すると、メニューの大枠のdiv内にliタグで3つの要素を作成し、それぞれにCSSアニメーションを適用することで作られておりました。

面白いのはliタグ1つにつき、before(白)とafter(ピンク)で2つの擬似要素を作り、左右から表示させていたことです。擬似要素アニメーションの使い方はめちゃめちゃ色々あるんだなと思いました。

 

②、「×」印のアニメーション設定

この閉じるボタンのバツ印も、擬似要素にアニメーションをかけることで作られております。正直、細かい部分まで仕組みを把握することはできておりませんが、対応するコードを以下に載せます。

 

実際のコーディング(まとめ)

nav.html

 

nav.css(抜粋)

 

nav.js

 

まとめ

今回はバーガーナビの表示の仕組みについてでした。今回のようなナビゲーション表示の場合、複雑なのはJavaScriptよりもCSSです。CSSの理解は正直追っついていませんが、一回一回ディベロッパーツールでコードを確認し仕組みを考察してみると、色々なサイトのバーガーメニューを見た際に、どのように作られているかのイメージが湧くようになります。

以上ありがとうございました。

-プログラミング学習
-, , ,

Copyright© s u p ? , 2019 All Rights Reserved.