ハンバーガーメニューに挑戦

ハンバーガーメニューに挑戦

2022年9月2日

更新日:2023年9月22日

こんにちは。大澤です🐶

今日はスマホでよくみられる「ハンバーガーメニュ―」の作成に挑戦しました。
(ハンバーガーメニュ―とはトップにある三本線のメニューバーのことです！)
難しすぎてたくさん助けを求めてしまいましたが、何とか作成できて一安心です💦

特に苦戦したのが、三本線のメニューをクリックしたとき×に変更する時でして…

例えば…HTMLは

<div>
<h1 class="menu"></h1>
</div>

CSSは…

.menu {
 background-image: url("img/00.png");
}

.menu.open-menu {
background-image: url("img/01.png");
}

jQueryは…

$(".menu").on("click", function () {
$(this).toggleClass("open-menu");
});

みたいな。
これでクリックしたときに00という画像から01という画像に変化します🤩

この方法で三本線のメニューを×の画像に変化するようコーディングしました。

そういえば最近、ロゴ制作が楽しいなと感じています♪
でも案が思いつかないときは本当に思いつかないので、
表現の幅を広げるためにもInstagramでロゴ制作されている方々の投稿を見ることにしました！

素敵なロゴで溢れていて、見るだけで心が満たされます(笑)

来週もゆったり頑張ります～

関連記事