HTMLやCSSを使って、WEBサイトをなんとか形にできる様になってくると、次はレスポンシブ対応にしたり、JavaScriptを使って動きのあるおしゃれなサイトにしたい！って思う様になりますよね。
HTMLから入って、なんとかCSSまでは無難に扱えるようになってきたけど、JavaScriptは異次元の世界に思っていました。
それでも今のご時世、スマホ表示に対応していないサイトなんて自分でもなかなか見る気になれませんし、見づらくて作る側としてもなんか申し訳なく思っちゃいますよね。
そんな時、一番最初にぶつかる壁がこのハンバーガーメニューではないでしょうか？
かくゆう私もそうでした。。。
ハンバーガーメニューのないスマホサイトなんて考えられなくなってきてますもんね。
ということで、今回はそんなハンバーガーメニューの構造と作り方をとってもわかりやすくまとめてみましたので、ぜひ参考にしてみてください。
かなり初心者の方でもわかるように心がけて書いたつもりです。
ここにあるコードはこちらのGitHubでも公開してますので、ご自由にお持ち帰りください。https://github.com/JUNicoi/hamburger
下準備をしよう！
ハンバーガーメニューを作り始める前に、HTMLにCSSとjQueryやJavaScriptを読み込めるようにしておきましょう。
jQueryとJavaScriptを読み込もう！
ここではjQueryはCDNを使って読み込む方法を使って説明を進めていきます。
CDNで読み込む方がサーバーへの負荷も減って、読み込み速度も向上します。
jQueryのCDNはHTMLファイルの</body>の直前に記述します。
<!-- jquery CDN 読み込み -->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"
></script>
</body>
</html>jQueryのバージョンは3.6.1を読み込んでいます。
ここで気をつけたいのはjQueryのバージョンをいくつも記述しないことです。
はじめたばかりの頃は複数のバージョンを記述していることが原因で、jQueryが動作せず、原因究明に時間を取られてしまうケースがしばしば見受けられます。
jQueryのCDNを読み込める様にしたら、次には自作のJavaScriptファイルを読み込みます。
ここではルートディレクトリ（ディレクトリ＝フォルダ）の中に「js」という名前のディレクトリを作成して、その中に「script.js」という名前のJavaScriptファイルを作ってあります。（「script」の部分は好きな名前で構いません）
この「script.js」ファイルをHTMLに読み込んでいきます。
読み込む位置は先ほど記述したjQueryの下に記述します。
jQueryを先に読み込んでおかないと、JavaScriptのコマンドがjQueryを使ってWEBサイトのコードを操作できないからです。
<!-- jquery CDN 読み込み -->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"
></script>
<!-- 自作JavaScript 読み込み -->
<script src="./js/script.js"></script>
</body>
</html>これでJavaScriptを使う準備ができました。
CSSを読み込もう！
CSSを読み込みは<head></head> の間に記述します。
JavaScriptファイルと同じように、ルートディレクトリの中に「css」ディレクトリを作成します。
その中に、「style.css」を作成しこれを読み込みます。（「style」も好きな名前で構いません）
こんな感じで。
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>動くハンバーガーメニューボタンの作り方</title>
<!-- リセットCSSファイルの読み込み -->
<link rel="stylesheet" href="./css/reset.css" />
<!-- 自作のCSSファイルの読み込み -->
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>これでCSSファイルも読み込める様になりました。
私の場合、自作のCSSファイルとは別に「reset.css」というリセットCSSを先に読み込んで、ブラウザが最初から持っているCSSをキャンセルしています。
HTMLで材料を用意しよう！
まずはHTMLのコーディングから始めて行きましょう。
ハンバーガーメニューのHTMLは実はとってもシンプルで、たったこれだけ。
<body>
<!-- ハンガーガーの３本線 -->
<div class="openbtn"><span></span><span></span><span></span></div>divタグにopenbtnクラスをつけて、その中にspanタグを３つ並べただけのコードしかありません。
このspanタグ１つずつがそれぞれハンバーガーの棒線１本１本に相当します。
spanタグにCSSで色や形をつけることであの３本線が作られているんですねー。
私も始めてみた時は「こんな風に作られているんだぁ〜」ってびっくりしました。
というわけで、材料の準備は完了です。
次からいよいよJavaScriptとCSSを使ってアニメーション付きのハンバーガーメニューを作って行きます。
JavaScriptで動きを付けよう！
JavaScriptでは既にHTMLに記述されたクラスに新たなクラスを付与したり削除する命令を書いて行きます。
それだけで動くボタンが作れるの？と不思議に思うかも知れません。
私もそうでしたが、JavaScriptを使って何かものすごく複雑な命令を出しているのかと思っていました。
しかし、実際にはJavaScriptで新たにクラスを付与することで、付与されたクラスのCSSがそのタグに上書きされ、上書きされたCSSのデザインに変わるというだけのものだったのです。
あの動きの正体はJavaScriptではなく、CSSアニメーションのプロパティを使ったのもだったんですね。
というわけで、新たなクラスを付与するためのコードを自作のJavaScriptファイル（script.js）に記述して行きましょう。
$(".openbtn").click(function () { //HTMLの.openbtnの部分がクリックされたら
$(this).toggleClass("active"); //.openbtnに.activeを付与してね
});たったこれだけ。
付与されたものを外すためのコードも不要というもの意外な感じがしますよねー
CSSでデザインしてみよう！
今はまだHTMLを開いても、真っ白なページが表示されるだけですが、CSSで色や形を与えていくことで、待ちに待ったハンバーガーメニュー様がお出ましになられます。
やることは、変形前の姿と変形後の姿のデザインを書いて行きます。
３本線の色や、背景色、変化のスピードなどはみなさんのお好みのものに変えて使ってくださいね。
まずは外枠の四角の部分から。
/* 四角の部分 */
.openbtn {
position: fixed; /* 設置する位置を固定します */
top: 10px; /* 上から10pxの位置 */
right: 10px; /* 右から10pxの位置 */
z-index: 9999; /* 一番手前に表示 */
cursor: pointer; /* カーソルが上に来たらポインターに変身 */
width: 50px; /* 横幅５０px */
height: 50px; /* 縦幅５０px */
background-color: gainsboro; /* 四角の色 */
}画面の右上の方にグレーの小さな四角い箱が現れましたか？
そしたら次に中の３本線を書いて行きます。
一番上の「.openbtn span」が３本に共通するコードで、「.openbtn span:nth-of-type(1)」「.openbtn span:nth-of-type(2)」「.openbtn span:nth-of-type(3)」は順に１本目の線、２本目の線、３本目の線を表しています。
/* ３本線 */
.openbtn span {
display: inline-block;
transition: all 0.4s; /* 変化速度 */
position: absolute; /* 四角い箱に対して線の位置を調整するためのおまじない */
left: 14px; /* 四角の箱の左から１４pxの位置 */
width: 45%; /* 線の幅 */
height: 3px; /* 線の太さ */
border-radius: 2px; /* 線の角を少し丸く */
background-color: #666; /* 線の色 */
}
.openbtn span:nth-of-type(1) {
top: 15px; /* １本目の線の四角い箱の上からの位置 */
}
.openbtn span:nth-of-type(2) {
top: 23px; /* ２本目の線の四角い箱の上からの位置 */
}
.openbtn span:nth-of-type(3) {
top: 31px; /* ３本目の線の四角い箱の上からの位置 */
}これでベースが完成しました。
今はまだクリックしても何も起きませんので、続いて変形後のデザインを書いて行きましょう。
/* ×に変化 */
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg); /* １本目の線の角度と上からの位置の変更 */
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0; /* ２本目の線を見えなくする */
}
.openbtn.active span:nth-of-type(3) {
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg); /* １本目の線の角度と上からの位置の変更 */
width: 30%;
}これで完成です。
いかがでしたか？
CSSが書ければ、ほんの少しのJavaScriptの知識でハンバーガーメニューは作れてしまうんですね。
ハンバーガーメニューの基本的な構造は理解できたと思いますので、みなさんの作りたいサイトに合わせていろいろカスタマイズしてみてください。
次回はハンバーガーメニューをクリックした時に表示されるメニューの作り方を解説して行きたいと思いますので、お楽しみに！
コメント