【HTML/CSS】HTML×CSS×jQueryでハンバーガーメニューを作る
みなさん、こんにちは！
エンジニアのおちのです。
前回の記事では、HTMLとCSSを使って吹き出しを作ってみました。
今回は、HTMLとCSSを使って、ハンバーガーメニューの作り方を書いていきたいと思います。
メニュークリック時のイベント処理のために、jQueryも使用します。
ゴール
イメージ
まずはゴールイメージです。
ハンバーガーメニューがあり、クリックしたら閉じるボタン「×」に変わる仕様となります。
HTML
完成したHTMLです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="hamburger.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>ハンバーガー</title>
</head>
<body>
<header>
<div class="base p-head">
<div class="p-logo">
<a href="#">
<img src="./img/cropped-goatgreen-favicon.png" class="head-logo" alt="会社ロゴ" />
</a>
</div>
<div id="sp-hamburger">
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav class="sp-nav">
<ul>
<li><a id="nav-link-1" href="#">メニュー1</a></li>
<li><a id="nav-link-2" href="#">メニュー2</a></li>
<li><a id="nav-link-3" href="#">メニュー3</a></li>
<li><a id="nav-link-4" href="#">メニュー4</a></li>
<li><a id="nav-link-5" href="#">メニュー5</a></li>
</ul>
</nav>
</div>
</header>
</body>
<script>
$('[id^="nav-link-"]').on('click', function () {
$('.icon').toggleClass('open');
$('.sp-nav').slideToggle();
});
$('#sp-hamburger').on('click', function () {
$('.icon').toggleClass('open');
$('.sp-nav').slideToggle();
});
</script>
</html>CSS
完成したCSSです。
@media screen and (max-width: 480px) {
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
margin: 0;
padding: 0;
font-family: "游ゴシック", "Yu Gothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
background-color: rgb(207, 207, 207);
}
.base {
max-width: 1500px;
margin: 0 auto;
padding-left: 3%;
padding-right: 3%;
}
a {
text-decoration: none;
}
/* header */
header {
width: 100%;
height: 65px;
position: fixed;
top: 0;
background-color: white;
z-index: 99;
}
.p-head {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.p-logo {
width: 10%;
padding-top: 10px;
}
.p-logo>a {
width: 100%;
height: 100%;
}
.head-logo {
width: 100%;
}
#sp-hamburger {
background-color: transparent;
position: relative;
height: 60px;
width: 60px;
z-index: 100;
}
#sp-hamburger .icon span {
position: absolute;
left: 15px;
width: 30px;
height: 2px;
background-color: black;
border-radius: 8px;
transition: ease 0.75s;
}
#sp-hamburger .icon span:nth-of-type(1) {
top: 18px;
}
#sp-hamburger .icon span:nth-of-type(2) {
top: 30px;
}
#sp-hamburger .icon span:nth-of-type(3) {
bottom: 16px;
}
#sp-hamburger .open span:nth-of-type(1) {
top: 28px;
transform: rotate(45deg);
background-color: white;
}
#sp-hamburger .open span:nth-of-type(2) {
opacity: 0;
}
#sp-hamburger .open span:nth-of-type(3) {
top: 28px;
transform: rotate(-45deg);
background-color: white;
}
.sp-nav {
display: none;
z-index: 99;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgb(139, 189, 150);
}
.sp-nav ul {
display: flex;
flex-direction: column;
justify-content: center;
list-style: none;
height: 100vh;
padding: 0 20px;
}
.sp-nav li {
padding: 20px;
font-size: 18px;
font-weight: bold;
text-align: center;
background-image: linear-gradient(to right, white, white 10px, transparent 10px, transparent 15px);
background-size: 20px 1px;
background-repeat: repeat-x;
background-position: center bottom;
}
.sp-nav a {
color: white;
}
}どこで何をしているんだ！？ということで、
ここから先は、それぞれ内容に合わせてHTMLとCSSをピックアップして見ていきます。
ハンバーガーメニューデザイン
まずは、ハンバーガーメニューを作ります。
HTML
<div id="sp-hamburger">
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
</div>3つあるspanタグ、これで3本線を作ります。
CSS
#sp-hamburger {
background-color: transparent;
position: relative;
height: 60px;
width: 60px;
z-index: 100;
}
#sp-hamburger .icon span {
position: absolute;
left: 15px;
width: 30px; /* 線の幅 */
height: 2px; /* 線の太さ */
background-color: black; /* 線の色 */
border-radius: 8px;
transition: ease 0.75s;
}
#sp-hamburger .icon span:nth-of-type(1) {
top: 18px; /* 上の線の位置調整 */
}
#sp-hamburger .icon span:nth-of-type(2) {
top: 30px; /* 真ん中の線の位置調整 */
}
#sp-hamburger .icon span:nth-of-type(3) {
bottom: 16px; /* 下の線の位置調整 */
}幅や太さなど線の共通設定を行い、positionプロパティをabsolute（絶対位置）にして、
各線の位置を調整しています。
これらのパラメータを調整して、作りたい形のハンバーガーメニューを作ることができます。
クリック処理と閉じるボタンデザイン
クリックした時に閉じるボタンに変えるためには、
「クリックした時にはこれをしてください～」という処理を作る必要があります。
そのために、javascriptのライブラリ、jQueryを使用します。
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
...
<script>
$('[id^="nav-link-"]').on('click', function () {
$('.icon').toggleClass('open');
$('.sp-nav').slideToggle();
});
$('#sp-hamburger').on('click', function () {
$('.icon').toggleClass('open');
$('.sp-nav').slideToggle();
});
</script>まず、jQueryを使用するためにCDN経由で読み込みを行います。
そして、scriptタグ内で目的のfunctionを定義します。
各メソッドは、何をしているのか？
・toggleClass()メソッド
CSSから、引数で指定した”open”クラスの設定値を読み込みます。
・slideToggle()メソッド
指定した”sp-nav”要素が非表示の場合：slideDown()メソッド呼び出し
指定した”sp-nav”要素が表示の場合：slideUp()メソッド呼び出し
要は、ここでナビゲーションメニューの表示・非表示を切り替えています。
では、”open”クラスの設定値を見てみましょう。
CSS
#sp-hamburger .open span:nth-of-type(1) {
top: 28px;
transform: rotate(45deg); /* 線の角度調整 */
background-color: white; /* 線の色 */
}
#sp-hamburger .open span:nth-of-type(2) {
opacity: 0; /* 透明化 */
}
#sp-hamburger .open span:nth-of-type(3) {
top: 28px;
transform: rotate(-45deg); /* 線の角度調整 */
background-color: white; /* 線の色 */
}真ん中の線を透明化し、上と下の線の角度を調整して「×」を作り出します。
これで、ハンバーガーメニューをクリックした時のCSSの切り替えができました！
sp-nav要素は、ナビゲーションメニューのデザインですので、ご参考までに。
最後に
ハンバーガーメニューの作り方、いかがでしたでしょうか？
CSSは割とシンプルだったと思います。
jQueryの呼び出しているメソッドが、どんな処理をしているかが今回のポイントですね！
以上となります。
最後まで読んでいただき、ありがとうございました！
【HTML/CSS関連】
CSSだけで星評価レーティングを作る方法
HTMLとCSSで吹き出しを作る