レスポンシブ対応のハンバーガーメニューについて調べてみた

はじめに

はじめまして。WEBデザイナーのUka Suzukiと申します。Qiitaでは、主にHTML5/CSS3、JavaScript(jQuery)、PHP、WordPressについて学んだこと、新たな課題の発見など、アウトプットの場として活用していきます。

今回最初の記事では、下記のサイトを参考に、「レスポンシブに対応するハンバーガーメニューの仕組み」について勉強していきます。

全体のコード一覧

See the Pen Untitled by Uka Suzuki (@Uka-Suzuki) on CodePen.

今後の課題

次回は、自分で一からハンバーガーメニューを考える事を目標に、以下２つの勉強を進めていきます。

1. display、position、transform、transitionプロパティの理解を深める。
2. JavaScriptで開閉アニメーションを作れるようになる。

※下記のサイトを参考に現在、理解を深めています👇

まとめ

今回は、「こういうパーツが作りたい！」という気持ちを書き出した形になりました。今後は、WEBサイト制作における頻出UIパーツをすぐに考え、作れるようJavaScriptの勉強を中心に取り組んでいきます。