はじめに
「ハンバーガーメニューの簡単な作り方を知りたい！」
「ハンバーガーメニューの最低限の実装方法を知りたい！」
「ハンバーガーメニューの作り方を調べたけど、どれも難しいものばかりで、自分には実装できない…」
これらのお悩みを解決する記事を作りました。
本記事では、最低限のハンバーメニューではありますが、非常に簡単に実装できる方法をご紹介します。
また、最低限とは言ってもちょっとしたアニメーションもついていますので、ここからアレンジしていただければ実践でも使える形になるのではないかと思います。
それでは、早速みていきましょう！
✔︎ 筆者の経験
・自社開発企業に勤める現役のWeb開発者
・プログラミング歴3年
・複数の開発プロジェクトの立ち上げを経験
ソースコード
完成版のソースコードを以下に貼っておきます。
ハンバーガーメニューの作り方
ハンバーガーを作成する
ここからは、ステップ・バイ・ステップでハンバーガーメニューの作り方を解説していきます。
まずは、ハンバーガーを表示させてみましょう。
HTMLから。
<div class="hamburger" id="hamburger">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
こちらはいろいろな方法がありますが、div要素で作ってしまうのが一番簡単だと思います。
次にCSSです。
* {
margin: 0;
padding: 0;
}
.hamburger {
cursor: pointer;
position: absolute;
top: 15px;
right: 35px;
}
.row {
margin: 5px;
width: 20px; // 線の長さ
height: 2px; // 線の太さ
background-color: black;
}
.row要素がハンバーガーのそれぞれの線にあたります。widthとheightで線の太さや長さを指定して、背景色をつければ完成です。
ハンバーガーメニューを作成する
次に、ハンバーガーメニューを作っていきます。
まずはHTMLから。
<div class="hamburger-menu" id="hamburger-menu">
<div class="close" id="close">
<span class="square_btn"></span>
</div>
<ul>
<li>HOME</li>
<li>MENU</li>
<li>CONCEPT</li>
<li>CONTACT</li>
<li>ACCESS</li>
<li>RECRUIT</li>
</ul>
</div>
.close要素は、閉じるボタンです。
後ほど解説しますので、今は無視して大丈夫です。
次にCSSです。
li {
list-style: none;
margin-top: 5px;
color: #fff;
padding: 0 10px;
}
.hamburger-menu {
position: absolute;
top: 0;
right: 0;
background-color: gray;
padding: 20px 50px;
transition: all 0.5s 0s ease;
display: flex;
flex-direction: column;
}
ハンバーガーメニューは後にアニメーションで現れたり消えたりさせたいので、transition: all 0.5s 0s ease;をつけておきます。transitionをつけることによって、要素が変化したときにアニメーションをつけることができるようになります。
ボタンによってハンバーガーメニューを表示させる
現状では、ハンバーガーボタンとハンバーガーメニューが両方表示されてしまっているかと思います。
そこで、初期状態ではハンバーガーメニューは隠し、ハンバーガーボタンが押されると、ハンバーガーメニューが表示されるようにしてみたいと思います。
まずは、CSSを調整していきましょう。
body {
overflow-x: hidden;
position: relative;
}
.hamburger-menu {
right: -200px; // 変更
}
.show {
right: 0;
}
body要素にoverflow-x: hidden;をつけることによって、body要素をはみ出した要素は表示されなくなります。
そこで、.hamburger-menu要素を右の画面外に追い出しておきます。.showのCSSを追加し、ハンバーガーボタンが押されたときに、この.showクラスをつけるようにしましょう。
JavaScriptでクラスの付け外しを行っていきます。
let hamburger = document.getElementById("hamburger");
let hamburgerMenu = document.getElementById("hamburger-menu");
hamburger.addEventListener('click', function () {
hamburgerMenu.classList.add('show');
hamburger.style.display = "none";
});
ハンバーガーボタンを押されたときに、ハンバーガーメニューに.showクラスを追加し、ハンバーガーボタンは非表示切り替えます。
これでハンバーガーメニューの表示切り替えができるようになりました🎉
閉じるボタンを作成する
ただこのままだと、ハンバーガーメニューが出続けてしまい、閉じることができません。
そこで、最後に閉じるボタンを作成していきましょう！
CSSを作成します。
.close {
margin-bottom: 20px;
cursor: pointer;
}
.square_btn {
display: block;
position: relative;
}
.square_btn::before,
.square_btn::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px; /* 棒の幅（太さ） */
height: 20px; /* 棒の高さ */
background: #fff; /* バツ印の色 */
}
.square_btn::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.square_btn::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
閉じるボタンのCSSは若干ややこしいですが、こちらはとりあえずコピペでOKです。
他のネット記事にもたくさんサンプルが出ているかと思いますので、適時参照し、アレンジを加える感じで大丈夫だと思います。
最後に、JavaScriptで制御しましょう。
let close = document.getElementById("close");
close.addEventListener('click', function () {
hamburgerMenu.classList.remove('show');
hamburger.style.display = "block";
});
先ほどとは逆で、.showクラスを外し、ハンバーガーボタンを表示させています。
これで、ハンバーガーメニュー完成です🎉
最後に
いかがでしたでしょうか？
非常に簡単にハンバーガーメニューを作成することができたのではないでしょうか。
筆者はこの方法が一番簡単なハンバーガーメニューの作り方だと思っています。
ただし、これは最低限の実装ですので、これをベースに適時アレンジを加えて実践で使えるようにしていただければと思います。
ではでは😊
コメント