【JS初心者に必見！】JavaScriptだけで簡単ハンバーガーメニューの作り方

 

以前、ハンバーガーメニューの作成方法を紹介したと思うんですが、
（以前紹介したハンバーガーメニューはコチラ↓↓）
【ハンバーガーメニュー＆トグルニュー】クリックすると表示されるグローバルナビの実装方法

今回はJS初心者の方のためにJS初心者の私が、
より分かりやすい簡単なコードでハンバーガーメニューを再度ご紹介したいと思います！

今回、作成するのはこちらのハンバーガーメニューです。

DEMO

早速作成していきましょう！

HTMLで形作り

<div id="wrap">
　<header class="pfix">
　　<nav class="nav" id="nav_f">
　　　<ul>
　　　　<li><a href="#one" class="list">one</a></li>
　　　　<li><a href="#two" class="list">two</a></li>
　　　　<li><a href="#three" class="list">three</a></li>
　　　　<li><a href="#four" class="list">four</a></li>
　　　　<li><a href="#five" class="list">five</a></li>
　　　</ul>
　　</nav>
　　<div id="target">
　　　<div class="target_inner">
　　　　<span class="target_inner_line target_inner_1" id="line1"></span>
　　　　<span class="target_inner_line target_inner_2" id="line2"></span>
　　　　<span class="target_inner_line target_inner_3" id="line3"></span>
　　　</div>
　　</div>
　</header>

　<main>
　　<section style="background: #efa2c2;">
　　　<h2 id="one">one</h2>
　　</section>
　　<section style="background: #7bd1e0;">
　　　<h2 id="two">two</h2>
　　</section>
　　<section style="background: #fc9967;">
　　　<h2 id="three">three</h2>
　　</section>
　　<section style="background: #5ecfad;">
　　　<h2 id="four">four</h2>
　　</section>
　　<section style="background: #fff6a1;">
　　　<h2 id="five">five</h2>
　　</section>
　</main>
</div>

早速簡単に説明していきます！

<nav class="nav" id="nav_f">
　　<ul>
　　　　<li><a href="#one" class="list">one</a></li>
　　　　<li><a href="#two" class="list">two</a></li>
　　　　<li><a href="#three" class="list">three</a></li>
　　　　<li><a href="#four" class="list">four</a></li>
　　　　<li><a href="#five" class="list">five</a></li>
　　</ul>
</nav>

ここの部分でハンバーガーを押した時に出てくるナビメニューを作成しています！

<div id="target">
　　<div class="target_inner">
　　　　<span class="target_inner_line target_inner_1" id="line1"></span>
　　　　<span class="target_inner_line target_inner_2" id="line2"></span>
　　　　<span class="target_inner_line target_inner_3" id="line3"></span>
　　</div>
</div>

ここでハンバーガー本体を作成しています！

ハンバーガーの棒の部分は、この方法以外にもdivで作成する方法や::after,::beforeで作る方法など
様々ありますが、今回はspanを使って作成しました！

CSSで形を整える

*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    margin: 0;
    color: #313131;
    
}

h2{
    margin: 0;
    font-family: "メイリオ", sans-serif;
    line-height: 100vh;
}

/* header */
header {
    width: 100%;
    position: relative;
}

.pfix{
    width: 100%;
    position: fixed;
}

/* nav_menu */
.nav{
    position: absolute;
    height: 100vh;
    width: 100%;
    left: -100%;
    background: rgba(99, 99, 99,.95);
    -webkit-transition: 1.5s;
    transition: 1.5s;
}

ul{
    margin: 0;
    padding: 0;
}

li{
    height: calc(100vh/5);
    line-height: 187.39px;
    list-style-type: none;
    font-size: 3em;
    text-align: center;
}

a{
    display: block;
    text-decoration: none;
    color: #fff;
}

/* hamburger_line */
#target {
    width: 40px;
    height: 30px;
    position: absolute;
    top: 25px;
    left: 50px;
    cursor: pointer;
    display: block;
    -webkit-transition: 1.5s;
    transition: 1.5s;
}

.target_inner{
    width: 40px;
    height: 30px;
    position: relative;
}

.target_inner_line {
    display: block;
    width: 40px;
    height: 5px;
    background: #636363;
    -webkit-transition: 1.5s;
    transition: 1.5s;
    border-radius: 50px;
    position: absolute;
}

.target_inner_1 {
    top: 0;
}

.target_inner_2 {
    top: 13px;
}

.target_inner_3 {
    top: 26px;
}

/* 動き */
.fadein{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.linea,.lineb,.linec{
    background: #ffffff;
}

.linea {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    top: 13px;
}

.lineb {
    opacity: 0;
}

.linec {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
    top: 13px;
}

/* main */
main section{
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    text-align: center;
    line-height: 100vh;
}

cssは少々長いので詳しい説明を省きますが、簡単に説明すると
/*動き*/の部分でClass名を決めて動きを指定しています。
後はお好みで幅や色、動きなどを変えてみてください！

JavaScriptで動きを付ける

function hamburger() {
　　document.getElementById('line1').classList.toggle('linea');
　　document.getElementById('line2').classList.toggle('lineb');
　　document.getElementById('line3').classList.toggle('linec');
　　document.getElementById('target').classList.toggle('slidex');
　　document.getElementById('nav_f').classList.toggle('fadein');
}

document.getElementById('target').addEventListener('click', function () {
　　hamburger();
});

let list = document.getElementsByClassName('list');

for (let i = 0; i < list.length; i++) {
　　list[i].addEventListener('click', function () {
　　　　hamburger();
    });
}

まず、今回のjsの書き方を簡単に説明すると･･･

htmlからID名とClass名を取って来て、それをクリックしたとき(動きはcssで指定)
そのクラス名をこのID名に付けてね～というコードになっています！

それでは、少しずつかみ砕いていきたいと思います！

Lesson1

function hamburger(){}

hamburgerという関数を宣言をして、{}の中にしたい処理をまとめておきます。

Lesson2

document.getElementById('').classList.toggle('')

document（html）の中から、Classを付けたい場所のID名をgetElementById(‘ ‘)で取ってきて、
そこに.classList.toggle(‘ ‘)でcssで動きを指定したclass名を付与します。
toggleでon/offを切り替えることができます！

Lesson3

document.getElementById('target').addEventListener('click', function () {
　　hamburger();
});

getElementByIdでとってきたIDにaddEventListenerでイベント処理を指定して、
その中に先ほど作成したクリックしたときにしたい処理をまとめていた関数を呼び起こします。

ここまでの処理で、ハンバーガーアイコンをタッチしたときメニューが出てきたり、閉じたりするはずです！

次は、navのliに対して、クリックしたらメニューを閉じてリンク先へ飛ばす処理を書いていきます！

Lesson4

let list = document.getElementsByClassName('list');

getElementsByClassName(‘ ‘)でクラス名を呼び起こすことができます。
このまま書くのもいいのですが、少々長いので今回は変数に入れておきます。

Lesson5

for (let i = 0; i < list.length; i++) {}

liひとつずつに最初の処理を指定していかないといけないのですが、それでは長くなり手間なので
ここでは、forで繰り返し処理をし、どのくらい繰り返すのか指定していきます。

iに0を代入し、iがlistのlength(要素数)より小さい時、iに1を足していくという感じなんですけど、
簡単に言うとiが要素数を超えるまで処理してね！という意味で{}の中に処理を書いていきます。
ここでいう要素はClass名listが付いているliに当たります！

Lesson6

list[i].addEventListener('click', function () {hamburger();});

list[i]で、Class名listが付いているliをひとつずつ取り出してきます。
あとはlesson3と同じで、クリックしたとき、hamburgerという関数を呼び起こして処理してね！になります。

 

どうでしたか？こうやって少しずつかみ砕いてみると簡単ですね！
JS博士の人達からしたら拙いコードかもしれませんが、動いたのでＯＫ(/・ω・)/(笑)

まずは簡単なコードを組んで、そこからどんどん改造していくことで脱JS初心者になれるのでは！！
皆さんも、試してみてください！