ハンバーガーメニュー（ドロワーナビゲーション）の作り方

ハンバーガーメニュー（ドロワーナビゲーション）を楽して作りたい人

ハンバガーメニューどうやって作るんだろ？
毎回作るの大変そうだから、ちゃんとしたテンプレほしいなぁ

こういった疑問に答えます。

しんぺー

この記事を書いているぼくはフロントエンドエンジニアとして日々コーディングをしています。

内容は若干難しくわからない箇所もあるかもしれませんが、そんな方でもテンプレとして使えるように解説していきますので、すべて理解する必要はありません。

作りやすい、理解しやすい解説は沢山あるかと思いますが、業務レベルで使い回せる高品質なハンバーガーメニューになります。

完成形のイメージ

こんな感じです。

バーの部分は画像で切り替えるのではなくてコーディングしています。
またバーだけでなく「MENU」「CLOSE」といった文字も表示させています。

文字をナシにしたり、文字を「オープン」「クローズ」とかに変更することもできます。

オープンとクローズボタンを3回以上押した方は、がんばって最後まで読んで一緒に実装していきましょう！

HTMLとSCSSはコピペでOKです。

バーのサイズやカラー、文字や文字色など適宜変更してください。
説明雑ですみません、、、。

jQueryを使いますので、jQuery本体を読み込みます。

Web制作の学習始めた頃、この「jQuery読み込みます」ってやつ苦手でした。

「うわぁ、これ難しいやつだ、、、無理〜」ってなってました。

ややこしいところ解説します。

まず、全部理解しなくていいです。
解説しますと言いながら全然してなくてすみません。
でも、変更箇所がわかればOKです。そのためのテンプレですから。

jQueryではバーの開閉とか、表示文字の切り替えとか他にも色々していますが、変更が必要な箇所は文字の変更だけです。

CodePenでコメントアウトしてる箇所ですがが、文字を変更する時はここを変更してください。

text(“CLOSE”);、text(“MENU”);　このダブルクォーテーションで囲われている文字部分を変更してください。
text(“クローズ”);、text(“オープン”);　とか、こんな感じです。

整理すると、

jQuery以上です。

解説は以上になります。
あまり説明もしていませんが、自身のテンプレートにコピペで入れていただいて必要な箇所だけ都度編集すれば大丈夫だと思います。特にjQuery部分はよくわからないと思いますので、使いながら徐々に理解できれば大丈夫です。

最後まで読んで頂きありがとうございました！