CSSでハンバーガーメニューをスタイリングしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、ナビゲーションによく使われるハンバーガーメニューをスタイリングしましょう。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングをします。項目に出てくるbodyやnavは、HTMLの要素です。

全体の設定

全体の設定をスタイリングします。

body

bodyのスタイリングをします。

nav

navのスタイリングをします。

ul

ulのスタイリングをします。

li

liのスタイリングをします。

icon

iconのスタイリングをします。

line

lineのスタイリングをします。

line2

line2のスタイリングをします。

active

activeのスタイリングをします。activeは、JavaScriptで制御するCSSのクラスです。

クリックするとこうなります。

translateYで❌点を作ってます。

a

aのスタイリングをします。

これで、完成です。

おわりに

一見、複雑そうに見えるハンバーガーメニューのスタイリングですが、一つ一つ分解して考えると恐るるにたらずですよね^^

本記事は自分用のメモのつもりで書いてますが、よかったら参考にしてください。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す