【JavaScript】「ライブラリーを使わずに「ハンバーガーメニュー」を作る方法！【分かりやすい】

2024/12/20 に公開

JavaScriptの入門編 programming

※この記事にはプロモーションが含まれています。

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

Web制作において頻出のデザインである「ハンバーガーメニュー」。

この記事では、ライブラリーを一切使わずにシンプルなコードでハンバーガーメニューを作る方法を解説します！

初心者の方にも分かりやすく、コードとともに丁寧に説明していきます。

この記事の内容！

「ハンバーガーメニュー」とは何か？
「ハンバーガーメニュー」の作り方！

また、下の動画でも「ハンバーガーメニュー」の作り方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「ハンバーガーメニュー」とは何か？

Webサイトの右上などに表示されている「三本線」のボタンをクリックすると、新しくメニューが表示される、というようなものを「ハンバーガーメニュー」と言います。この三本線の見た目がハンバーガーみたいなのでこの名前で呼ばれます。

あ！よく見るやつだね！

改訂3版JavaScript本格入門

JavaScriptの文法から現場での書き方まで、1冊でしっかり押さえたい方向けの定番書です。

Amazonで見る

Amazonのアソシエイトとして、当ブログは適格販売により収入を得ています。

「ハンバーガーメニュー」の作り方！

それではシンプルな「ハンバーガーメニュー」の作り方をまとめていきますね！

わーい！

完成品！

完成品はこちらです！

このようなシンプルな「ハンバーガーメニュー」を作ってみたい方は、下記にコードを載せるので、それを真似してみてください！

「HTML」ファイル！

<div id="menuBtn">
    <div class="box">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</div>

<nav>
    <ul>
        <li><a href="#n1">１：見出しです。</a></li>
        <li><a href="#n2">２：見出しです。</a></li>
        <li><a href="#n3">３：見出しです。</a></li>
        <li><a href="#n4">４：見出しです。</a></li>
        <li><a href="#n5">５：見出しです。</a></li>
        <li><a href="#n6">６：見出しです。</a></li>
    </ul>
</nav>
    
<div class="container">
    <h2 id="n1">１：見出しです。</h2>
    <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
    <h2 id="n2">２：見出しです。</h2>
    <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
    <h2 id="n3">３：見出しです。</h2>
    <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
    <h2 id="n4">４：見出しです。</h2>
    <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
    <h2 id="n5">５：見出しです。</h2>
    <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
    <h2 id="n6">６：見出しです。</h2>
    <p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
</div>

大きく分けてパーツは３つです。

「id=”menuBtn”」
「nav」
「class=”container”」

これら３つに分けられます。

「CSS」ファイル！

@charset "utf-8";

html {
    font-size: 16px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    width: 700px;
    margin: 130px auto;
}
nav {
    width: 400px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: black;
    transform: translateX(400px);
    transition: 0.6s;
    padding: 30px 10px;
}
nav.show {
    transform: translateX(0);
}
ul {
    list-style: none;
    padding: 20px;
    font-size: 30px;
}
li {
    margin-bottom: 10px;
}
a {
    color: white;
}
#menuBtn {
    position: fixed;
    top: 20px;
    right: 40px;
    width: 60px;
    height: 60px;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
}
.box {
    width: 50%;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
}
.bar {
    width: 100%;
    height: 4px;
    background-color: white;
    transition-duration: 0.6s;
}
#menuBtn.close .bar:nth-child(1) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
#menuBtn.close .bar:nth-child(2) {
    opacity: 0;
}
#menuBtn.close .bar:nth-child(3) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

このようにそれっぽいスタイルをつけます。

「JavaScript」ファイル！

let menuBtn = document.getElementById('menuBtn');
let nav = document.querySelector('nav');

menuBtn.addEventListener('click', () => {
    nav.classList.toggle('show');
    menuBtn.classList.toggle('close');
});

やってることはシンプルで、「menuBtn」をクリックした際に下記の２つの処理が走るように設定しているだけです。

nav.classList.toggle(‘show’);
menuBtn.classList.toggle(‘close’);

「nav」に「show」クラスをつけたり外したり、

「menuBtn」に「close」クラスをつけたり外したり、ということをしているだけです！

意外と簡単に「ハンバーガーメニュー」って作れるんだね！

まとめ！

これでシンプルなハンバーガーメニューが完成しました！ライブラリーを使わずに作ることで、カスタマイズ性が高まり、学びにも繋がります。

ぜひこのコードを参考に、自分だけのオリジナルメニューを作成してみてください！

ではまた！

1冊ですべて身につくJavaScript入門講座

JavaScriptを、動くものを作りながら基礎から通して学びたい方向けの入門書です。

Amazonで見る

Amazonのアソシエイトとして、当ブログは適格販売により収入を得ています。

＼めちゃくちゃ便利です／

毎日の新着を、通知で受け取る

最新の技術の動きを1分で読める記事にして、毎日お届けします。登録は無料で、いつでもやめられます。

iPhone は「ホーム画面に追加」すると通知を受け取れます

iPhone では、Safari で開いたままだと通知を出せない決まりになっています。このブログをホーム画面に置くと、アプリのように通知が届くようになります。下の5つを順番に行ってください。1分ほどで終わり、料金はかかりません。

共有ボタンを押す

いま見ているこのページのまま、画面のいちばん下を見てください。真ん中にある四角から上向きの矢印が出ているマークが共有ボタンです。これを1回タップします。

下のバーが見えないときは、画面を指で少し下に動かすと出てきます。
「ホーム画面に追加」を選ぶ

画面の下からメニューが出てきます。メニューを指で上に動かして下のほうを表示し、「ホーム画面に追加」（＋のマーク）を探してタップします。

見当たらないときは、メニューの中の「その他」や「…」を押すと出てきます。
右上の「追加」を押す

「ホーム画面に追加」という画面に変わります。名前は「皇帝ペンギン」のままで大丈夫です。右上の「追加」をタップします。
ホーム画面のアイコンから開く

Safari を閉じてホーム画面に戻ると、ペンギンの絵の「皇帝ペンギン」というアイコンが増えています。これをタップして開きます。

ここが大事です。Safari からではなく、必ずこのアイコンから開いてください。
「通知をオンにする」→「許可」

開くと、画面の下に「通知をオンにする」という黄色いボタンが出ます。タップすると確認が出るので、「許可」を選びます。「通知をオンにしました」と出たら完了です。

次の日から、新しい記事が出るたびに通知が届きます。やめたいときは、記事の下の「この端末の通知をやめる」を押すか、アイコンを削除してください。

動画でじっくり学びたい方は YouTube メンバーシップへ。