CSSとJSでハンバーガーメニューを作る

はじめに

こんにちは。未経験エンジニアりーたまです。
JSの勉強を初めて、もうそろそろ1か月...。
今回はよくあるハンバーガーメニューを作成しました。

*お昼にタイムリーな記事ではありませんが、今日の昼ご飯はマックにしようと思います。

ちなみに

のハンバーガーメニューをお手本にして作成しております(一部分抜粋の為完成形ではありません)

コード

See the Pen ハンバーガーメニュー by ri-tama (@ri-tama) on CodePen.

CODEPENを埋め込みましたが、再現性が、、！(ちょっといじりましたが、×部分がかなりの失敗)

JavaScript抜粋

<script>
    'use strict'
// 1
    const menu = document.querySelector(".menu")
    const button = document.querySelector(".Button")
    const button1 = document.querySelector(".Button-top")
    const button2 =document.querySelector(".Button-bottom")
    const button3 =document.querySelector(".Button-medium")
    
// 2
    const toggleMenu =()=>{
        menu.classList.toggle("MenuIsOpen")
        button1.classList.toggle("change")
        button2.classList.toggle("change2")
        button3.classList.toggle("change3")

    }
// 3
     button.addEventListener("click",()=>{
        toggleMenu()
    })
</script>

以下簡単に説明です。

1
変更したいクラスをそれぞれ変数に代入。
2
toggleMenu関数
クラスの付け外しができるtoggleメソッドを実行する関数を作成。
3
button変数をクリックしたら、さきほどの関数が呼び出されるというイベントを作ります。

仕組みとしてはmenu部分がX軸に100%ずれている状態をデフォルトにして、
クリックすることでそのずれている状態を0%に戻すということをしています。

問題点・改善点

・挙動
　ハンバーガーメニュー→Xの挙動は上手くいくが
　X→ハンバーガーメニューへの挙動が初期値に戻る動きで、スムーズさがない。
　あとX印の再現性もどうにかしたい(自分のPC上ではX印となっていますが)
　改善の余地あり。
・コーディング
　HTMLとCSSのコーディング力の低さから、時間を大半使ってしまった。
　コーディング力は必須なので、クローンサイトを作りつつ、本や記事を見ながら
　やっていこうと思います。

まとめ

1からコーディングは初めてだったので、苦戦したけど得られる物も多かったです。
現状これぐらいしかできない、という力の無さも実感できました。
できたという達成感は素直に受け止めて、次の勉強へ進みます。

次はスクロールアニメーションに取り組みます。
またそれも完成次第投稿します。
読んでいただきありがとうございました！

参考記事
https://twitter.com/hideki_climax/status/1604415675069476864

訂正
簡単に説明の文章が間違っていたので、訂正しました(12/23)