前回のブログ記事では、ヘッダーとメニューをコーディングする方法を解説しました。今回は、モバイルデバイスなどでよく見られる「ハンバーガーメニュー」を作成していきます。レスポンシブデザインで、画面が小さい時に自動的にメニューが折りたたまれる仕組みです。
1. HTMLの準備
まずは、ハンバーガーメニューのHTML構造を作成します。<nav>タグの中にリスト形式でメニュー項目を配置し、ハンバーガーメニューのアイコン部分も追加します。
<nav>
<div class="menu-icon" id="menu-icon">
<span></span>
<span></span>
<span></span>
</div>
<ul class="menu" id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="menu-icon">: 3本の<span>タグでハンバーガーメニューアイコンを作成します。<ul class="menu">: メニュー項目がリスト形式で配置されています。
2. CSSでハンバーガーメニューをデザイン
次に、ハンバーガーメニューのデザインとレスポンシブ対応をするためのスタイルを追加します。
/* 基本スタイル */
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu {
display: flex;
list-style: none;
}
.menu li {
margin-right: 20px;
}
.menu-icon {
display: none;
flex-direction: column;
cursor: pointer;
}
.menu-icon span {
width: 30px;
height: 3px;
background-color: #333;
margin: 4px 0;
}
/* スマホ画面サイズのときにメニューを隠す */
@media (max-width: 768px) {
.menu {
display: none;
flex-direction: column;
}
.menu-icon {
display: flex;
}
}
.menu-icon span: 3本の線を作るために、幅30px、高さ3pxの矩形を設定しています。@media (max-width: 768px): 画面幅が768px以下になると、メニューが非表示になり、ハンバーガーメニューアイコンが表示されます。
3. JavaScriptでハンバーガーメニューを動かす
ハンバーガーメニューをクリックした時に、メニューを表示・非表示に切り替えるためのJavaScriptを追加します。
const menuIcon = document.getElementById('menu-icon');
const menu = document.getElementById('menu');
menuIcon.addEventListener('click', () => {
menu.classList.toggle('active');
});
menu.classList.toggle('active'):activeクラスがメニューに付加されることで、メニューが表示・非表示を切り替わります。
さらに、CSSに以下のクラスを追加して、メニューが表示されるときのスタイルを指定します。
.menu.active {
display: flex;
}
.menu.active: JavaScriptでこのクラスが追加されると、display: flex;でメニューが表示されます。
4. 最終確認
こまでで、ハンバーガーメニューの基本的なコーディングが完了しました。ブラウザの開発者ツールを使って、画面幅を変更しながら動作を確認してみてください。モバイル画面では、ハンバーガーメニューが表示され、クリックすることでメニューが開閉するはずです。
今回のハンバーガーメニューはシンプルな実装ですが、応用することでアニメーションやデザインを工夫することもできます。自分なりのカスタマイズを楽しんで、レスポンシブなウェブサイトを作り上げましょう！
コメント