こんにちは！Web開発初心者のryumaです！！今日はWeb初学者の私が、ヘッダーメニューの作成方法についてシェアします。特に、タイトルエリアからスライドダウンメニューを実装する方法を、生のJavaScriptを使ってわかりやすく解説します。JavaScriptはプログラミング言語なので少しハードルが上がるかもしれませんが、一緒にステップを確認しながら進めていきましょう！
1. 基本的なHTML構造を作成する
まずは、HTMLでヘッダーメニューの基本構造を作成しましょう。今回は、ロゴとメニュー項目を含むシンプルなヘッダーを作り、各メニュー項目にサブメニューを追加します。
<header class="l-header">
<div class="l-header__title">
<a href="#">
<img src="logo.svg" alt="サイトのロゴ">
</a>
</div>
<nav class="l-header__nav">
<ul class="l-header__nav__body">
<li>
<a href="#">メニュー1</a>
<ul class="l-header__nav__accordion">
<li><a href="#">サブメニュー1</a></li>
<li><a href="#">サブメニュー2</a></li>
</ul>
</li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</nav>
</header>
この構造では、<ul> タグ内にリスト形式でメニュー項目を作成し、サブメニューは<ul class="l-header__nav__accordion"> として定義しています。
2. CSSでメニューのデザインを設定する
次に、CSSを使ってヘッダーメニューをデザインします。まず、メニューを横並びにし、サブメニューを最初は非表示にしておきます。ホバーしたときにスライドダウンで表示する効果を後ほどJavaScriptで実装します。
.l-header {
width: 100%;
height: 70px;
background-color: #fff;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
.l-header__title {
margin-left: 20px;
}
.l-header__nav__body {
list-style: none;
display: flex;
}
.l-header__nav__body li {
position: relative;
margin-right: 20px;
}
.l-header__nav__body li a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.l-header__nav__accordion {
display: none;
position: absolute;
top: 70px;
background-color: #f0f0f0;
list-style: none;
padding: 10px 0;
z-index: 100;
}
.l-header__nav__accordion li {
padding: 10px 20px;
}
display: none; でサブメニューは最初に非表示にしておき、後でJavaScriptで表示・非表示を切り替えるようにします。
3. JavaScriptでスライドダウンメニューを実装
次に、JavaScriptを使ってホバー時にサブメニューがスライドダウンする動きを実装します。
今回はjQueryなどのCDNは使わずに生のJavaScriptで書いてみましょう。
document.addEventListener('DOMContentLoaded', function () {
// メニュー項目にマウスが乗った時の処理
const menuItems = document.querySelectorAll('.l-header__nav__body > li');
menuItems.forEach(function (item) {
// マウスを乗せた時にサブメニューを表示
item.addEventListener('mouseenter', function () {
const subMenu = item.querySelector('.l-header__nav__accordion');
if (subMenu) {
subMenu.style.display = 'block'; // サブメニューを表示
subMenu.style.maxHeight = subMenu.scrollHeight + 'px'; // スライドダウンのような効果
}
});
// マウスを外した時にサブメニューを非表示
item.addEventListener('mouseleave', function () {
const subMenu = item.querySelector('.l-header__nav__accordion');
if (subMenu) {
subMenu.style.maxHeight = '0'; // スライドアップのような効果
setTimeout(() => {
subMenu.style.display = 'none'; // サブメニューを完全に非表示
}, 300); // アニメーションが終わるまで待機
}
});
});
});
解説
document.addEventListener('DOMContentLoaded', function () {...}): ページのコンテンツが読み込まれた後にJavaScriptを実行します。querySelectorAll('.l-header__nav__body > li'): 各メニュー項目を取得します。mouseenterとmouseleaveイベントを使用して、マウスがメニュー項目に乗ったとき、または外れたときの処理を追加します。
サブメニューの高さを maxHeight で制御することで、スライドダウンとスライドアップのようなアニメーション効果を実現しています。
4. 実際に動かして確認する
これで、メニュー項目をホバーするとサブメニューがスライドダウンして表示され、マウスを外すとスライドアップして消える動きが完成しました！ブラウザで実際に動かして、正しく機能しているか確認してみましょう。
まとめ
今回は、ヘッダーメニューのタイトルエリアからスライドダウンメニューを生のJavaScriptで実装する方法を解説しました。私も最初はメニューのアニメーションをどうやって作るか悩んでいましたが、今回の方法でシンプルに実現できました。少しでも参考になれば嬉しいです！
リクエストがあれば、CSSのみでのアニメーションの実装方法や、さらに応用的な動きをJavaScriptで作っていこうと思いますので、またチェックしてくださいね！
コメント