ナビゲーションメニューをCSS・JavaScriptで用意する

<div>
   <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home（グラスタの場所一覧表〜入手範囲別〜）</a></li>
    <li class="breadcrumb-item"><a href="site_create.html">個人サイト制作：サイトマップ</a></li>
    <li class="breadcrumb-item active" aria-current="page">ナビゲーションメニューをCSS・JavaScriptで用意する</li>
   </ol>
</div>
    

/* パンくずリスト全体のスタイル */
.breadcrumb {
    display: flex; /* フレックスボックスで横並びに配置 */
    list-style: none; /* リストのスタイルをなしにする */
    padding: 10px 15px; /* 内側の余白を調整 */
    margin: 0; /* 外側の余白をなしにする */
    background-color: #f8f9fa; /* 背景色を追加 */
    border-radius: 5px; /* 角を丸くする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を追加 */
    font-size: 0.7em; /* フォントサイズを調整 */
}

/* 各パンくずリストアイテムの間に区切りを追加 */
.breadcrumb-item+.breadcrumb-item::before {
    content: ">"; /* 区切り文字を設定 */
    padding: 0 10px; /* 区切り文字の左右に余白を追加 */
    color: #6c757d; /* 区切り文字の色を設定 */
}

/* パンくずリスト内のリンクのスタイル */
.breadcrumb-item a {
    text-decoration: none; /* リンクの下線をなしにする */
    color: #1A73E8; /* リンクの文字色を設定 (Google blue) */
    transition: color 0.3s ease; /* ホバー時の色変化にアニメーションを追加 */
}

/* リンクをホバーしたときのスタイル */
.breadcrumb-item a:hover {
    color: #00A2ED; /* リンクの文字色を変更 (Microsoft blue) */
    text-decoration: underline; /* リンクに下線を追加 */
}

/* 現在のページのパンくずリストアイテムのスタイル */
.breadcrumb-item.active {
    font-weight: bold; /* 文字を太字にする */
    color: #6c757d; /* 文字色を設定 */
}
    

.breadcrumb {
display: flex; /* フレックスボックスで横並びに配置 */
list-style: none; /* リストのスタイルをなしにする */
padding: 10px 15px;
margin: 0;
background-color: #f8f9fa;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-size: 0.7em;
}
    

/* 検索コンテナのスタイル */
.search-container {
    width: 50%; /* 横幅を50%に設定 */
    margin-top: 20px; /* パンくずリストの下に配置 */
    margin-left: auto; /* 右側に配置 */
    background-color: white; /* 背景色を白に設定 */
    border-radius: 10px; /* 四隅を丸める */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加 */
    padding: 5px; /* 上下の内側の余白を縮小 */
}

/* 検索コンポーネントのスタイル */
.gcse-search {
    width: 100%; /* 横幅を親要素に合わせる */
}

/* 入力フィールドと検索ボタンのスタイル */
input.gsc-input,
input.gsc-search-button {
    width: 100%; /* 入力フィールドとボタンの横幅を100%に設定 */
    border-radius: 10px; /* 四隅を丸める */
    padding: 5px; /* 上下の内側の余白を縮小 */
}
    

<button id="generate-headings" data-open-text="ナビゲーションメニューをCSS・JavaScriptで用意するの目次を開く ▼"
   data-close-text="ナビゲーションメニューをCSS・JavaScriptで用意するの目次を閉じる ▲">ナビゲーションメニューをCSS・JavaScriptで用意するの目次を開く
   ▼</button>
～ ここにコンテンツ内容 ～
 <script src="/script/feinheadline1.js"></script>
    

@charset "UTF-8";

/* 目次アイテムの基本スタイル */
.toc-item {
    color: #1A73E8; /* 文字の色 (Google blue) */
    font-family: inherit; /* 親要素のフォントファミリーを継承 */
    font-size: 100%; /* フォントサイズを100%に設定 */
    margin: 0; /* 外側の余白をなしにする */
    padding: 5px 0; /* 上下に5pxのパディング */
    line-height: 2; /* 行間を2に設定 */
    transition: color 0.3s ease-in-out; /* 色変化のアニメーションを追加 */
    border-bottom: 1px solid #ddd; /* 各項目の下に薄いボーダーラインを追加 */
    padding-bottom: 5px; /* ボーダーラインと内容の間に余白を追加 */
}

/* 目次アイテムをホバーしたときのスタイル */
.toc-item:hover {
    color: #00A2ED; /* 文字の色を変更 (Microsoft blue) */
}

/* インデントのスタイル */
.indent-1 {
    text-indent: 1em; /* 半角1字分のインデント */
}

.indent-3 {
    text-indent: 3em; /* 半角3字分のインデント */
}

.indent-5 {
    text-indent: 4em; /* 半角4字分のインデント */
}

/* 各見出しタグ用のスタイル */
.toc-item-h1 a,
.toc-item-h2 a,
.toc-item-h3 a,
.toc-item-h4 a,
.feinheadline-h5 a,
.toc-item-h6 a {
    padding: 5px 10px; /* 内側の余白を追加 */
}

/* 目次生成ボタンのスタイル */
#generate-headings {
    background-color: transparent; /* 背景色を透明に設定 */
    color: #1A73E8; /* 文字の色 (Google blue) */
    font-family: inherit; /* 親要素のフォントファミリーを継承 */
    font-size: 120%; /* フォントサイズを120%に設定 */
    border-radius: 5px; /* 四隅を丸める */
    border: none; /* ボーダーをなしにする */
    text-decoration: underline; /* 下線を追加 */
    cursor: pointer; /* カーソルをポインターに変更 */
    text-align: left; /* テキストを左揃えにする */
    background: linear-gradient(to bottom, rgba(173, 216, 230, 0.5), rgba(173, 216, 230, 0)); /* 背景のグラデーションを追加 */
    font-weight: bold; /* 文字を太字にする */
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out; /* 背景色と文字色の変化にアニメーションを追加 */
}

/* 目次生成ボタンをホバーしたときのスタイル */
#generate-headings:hover {
    color: #00A2ED; /* 文字の色を変更 (Microsoft blue) */
    background: linear-gradient(to bottom, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0)); /* 背景のグラデーションを変更 */
}

/* 目次コンテナのスタイル */
#toc-container {
    margin-top: 1.5em; /* 上に余白を追加 */
    height: 0; /* 初期状態の高さを0に設定 */
    overflow: hidden; /* はみ出たコンテンツを隠す */
    transition: height 0.5s ease-out; /* 高さの変化にアニメーションを追加 */
}

/* 目次コンテナが表示されたときのスタイル */
#toc-container.show {
    height: auto; /* 高さを自動に設定 */
}
    

document.addEventListener("DOMContentLoaded", function () {
 let headingsGenerated = false;
 document.getElementById("generate-headings").addEventListener("click", function () {
  let tocContainer = document.getElementById("toc-container");
  let button = document.getElementById("generate-headings");
  if (!headingsGenerated) {
   if (!tocContainer) {
    tocContainer = document.createElement("div");
    tocContainer.id = "toc-container";
   }
   let headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
   headings.forEach((heading, index) => {
    let id = `heading-${index + 1}`;
    heading.id = id;
    let tocItem = document.createElement("p");
    tocItem.classList.add("toc-item");
    switch (heading.tagName.toLowerCase()) {
     case "h1":
      tocItem.classList.add("toc-item-h1");
      break;
     case "h2":
      tocItem.classList.add("toc-item-h2");
      break;
     case "h3":
      tocItem.classList.add("indent-1");
      break;
     case "h4":
      tocItem.classList.add("indent-3");
      break;
     case "h5":
      tocItem.classList.add("indent-5", "feinheadline-h5");
      heading.classList.add("feinheadline-h5");
      break;
     case "h6":
      tocItem.classList.add("indent-5");
      break;
    }
    let link = document.createElement("a");
    link.href = `#${id}`;
    link.textContent = heading.textContent;
    tocItem.appendChild(link);
    tocContainer.appendChild(tocItem);
   });
   document.getElementById("generate-headings").insertAdjacentElement('afterend', tocContainer);
   headingsGenerated = true;
  }
  if (tocContainer.classList.contains("show")) {
   tocContainer.style.height = "0";
   button.textContent = button.getAttribute("data-open-text");
  } else {
   tocContainer.style.height = tocContainer.scrollHeight + "px";
   button.textContent = button.getAttribute("data-close-text");
  }
  setTimeout(() => {
   tocContainer.classList.toggle("show");
  }, 10);
 });
});
    

document.addEventListener("DOMContentLoaded", function () {
    

let headingsGenerated = false;
    

document.getElementById("generate-headings").addEventListener("click", function () {
    

let tocContainer = document.getElementById("toc-container");
let button = document.getElementById("generate-headings");
    

if (!headingsGenerated) {
    if (!tocContainer) {
        tocContainer = document.createElement("div");
        tocContainer.id = "toc-container";
    }
    

let headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
    

headings.forEach((heading, index) => {
    let id = `heading-${index + 1}`;
    heading.id = id;
    let tocItem = document.createElement("p");
    tocItem.classList.add("toc-item");
    

switch (heading.tagName.toLowerCase()) {
    case "h1":
        tocItem.classList.add("toc-item-h1");
        break;
    case "h2":
        tocItem.classList.add("toc-item-h2");
        break;
    case "h3":
        tocItem.classList.add("indent-1");
        break;
    case "h4":
        tocItem.classList.add("indent-3");
        break;
    case "h5":
        tocItem.classList.add("indent-5", "feinheadline-h5");
        heading.classList.add("feinheadline-h5");
        break;
    case "h6":
        tocItem.classList.add("indent-5");
        break;
}
    

let link = document.createElement("a");
link.href = `#${id}`;
link.textContent = heading.textContent;
tocItem.appendChild(link);
tocContainer.appendChild(tocItem);
    

document.getElementById("generate-headings").insertAdjacentElement('afterend', tocContainer);
headingsGenerated = true;
    

if (tocContainer.classList.contains("show")) {
    tocContainer.style.height = "0";
    button.textContent = button.getAttribute("data-open-text");
} else {
    tocContainer.style.height = tocContainer.scrollHeight + "px";
    button.textContent = button.getAttribute("data-close-text");
}
    

setTimeout(() => {
    tocContainer.classList.toggle("show");
}, 10);
    

<div class="fden-hamburger-menu">
   <button class="fden-hamburger-button" id="fden-hamburger-button" onclick="toggleMenu()">☰ メニューを開く
    ▼</button>
   <div class="fden-menu" id="fden-menu">
    <div id="fden-menu-content"></div>
   </div>
  </div>
  <script src="../script/menu.js"></script>
    

<!DOCTYPE html>
<html lang="ja">

<head>
 <meta charset="UTF-8">
 <title>fein's personal siteのハンバーガーメニュー</title>
</head>

<body>
 <a href="/" style="color:#1A73E8;">ホーム（アナザーエデン グラスタの入手場所一覧）</a>
 <a href="/another-eden/anaden_sitemap.html" style="color:#1A73E8;">アナザーエデン関連ページ・サイトマップ</a>
 <a href="/another-eden/lua.html" style="color:#1A73E8;">アナザーエデンのプログラミングを個人サイトで試す</a>
 <a href="/contents/form.html#star" style="color:#1A73E8;">🌟宿星の断片ドロップ調査</a>
 <a href="/contents/form.html#dreamstar" style="color:#1A73E8;">🌟夢見と星跡の計算表</a>
 <a href="/contents/site_create.html" style="color:#1A73E8;">個人サイトのホスティングとコンテンツ作成</a>
 <a href="/contents/color.html" style="color:#1A73E8;">ウェブセーフカラーパレットなど便利ツール</a>
 <a href="/another-eden/atelier_studio.html" style="color:#1A73E8;">ファンサイト制作のためのアトリエ</a>
 <a href="/contents/protect.html" style="color:#1A73E8;">X（旧：Twitter）のAIからイラストなどを守る試み</a>
 <div id="denmenu">
  <a href="#" class="fden-submenu-toggle1" id="toggle-site-content"
   onclick="toggleSubMenu('fden-submenu2', 'toggle-site-content')">上記以外のコンテンツも見る▼</a>
  <div class="fden-submenu" id="fden-submenu2">
   <a href="/another-eden/anaden_beginner.html" style="color:#1A73E8;">アナザーエデンの初心者向けガイド</a>
   <a href="/another-eden/anaden_story.html" style="color:#1A73E8;">アナザーエデンのコンテンツリスト</a>
   <a href="/another-eden/anaden_boss.html" style="color:#1A73E8;">アナザーエデンの強敵リスト</a>
   <a href="/another-eden/anaden_weapon.html" style="color:#1A73E8;">アナデンで揃えたい武器やバッジなど</a>
   <a href="/another-eden/another-eden_feinpdf.html" style="color:#1A73E8;">アナザーエデン：feinが書いたレポート集</a>
   <a href="/contents/x_exoduslink.html" style="color:#1A73E8;">個人サイトのリンク掲載をご希望の方へ</a>

  </div>

  <a href="#" class="fden-submenu-toggle2" id="toggle-popular-pages"
   onclick="toggleSubMenu('fden-submenu1', 'toggle-popular-pages')">ポータルサイトで人気のページを見る▼</a>
  <div class="fden-submenu" id="fden-submenu1">
   <a href="https://portal.feinatelier.org/"
    style="display: flex; align-items: center; text-decoration: none; color: #00A2ED;">
    <img src="/image/anafish.png" alt="アナザーエデンのバディ_ピスケ" style="width: 8%; height: auto; margin-right: 10px;">
    fein's portal（ポータルサイト）へ戻ります
   </a>
   <a href="https://tinyurl.com/2xpfx4ws" style="color:#00A2ED;">グラスタの場所一覧表～入手範囲別～</a>
   <a href="https://tinyurl.com/279lmdze" style="color:#00A2ED;">SNSによるアナデンのソシャゲ化を避けるコツ</a>
   <a href="https://tinyurl.com/2aoxa9zd" style="color:#00A2ED;">feinのアナデン戦闘史_vol1</a>
   <a href="https://tinyurl.com/255tplla" style="color:#00A2ED;">feinのアナデン戦闘史_vol2</a>
   <a href="https://tinyurl.com/2bc29bx7" style="color:#00A2ED;">feinのアナデン戦闘史_vol3</a>
  </div>

  <a href="https://tinyurl.com/2ay3bltd" style="color:#00A2ED;">サイト制作者について</a>
 </div>

</body>

</html>
    

/* ハンバーガーメニューのコンテナスタイル */
.fden-hamburger-menu {
    position: relative; /* 相対位置を指定 */
}

/* ハンバーガーボタンのスタイル */
.fden-hamburger-button {
    font-size: 16px; /* フォントサイズを設定 */
    cursor: pointer; /* カーソルをポインターに変更 */
    color: #1A73E8; /* ボタンの文字色を設定 (Google blue) */
    background: linear-gradient(to bottom, rgba(173, 216, 230, 0.5), rgba(173, 216, 230, 0)); /* 背景のグラデーションを追加 */
    border: none; /* ボーダーをなしにする */
    padding: 10px; /* 内側の余白を設定 */
    border-radius: 5px; /* 四隅を丸める */
    font-weight: bold; /* 文字を太字にする */
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out; /* 背景色と文字色の変化にアニメーションを追加 */
}

/* ハンバーガーボタンをホバーしたときのスタイル */
.fden-hamburger-button:hover {
    background: linear-gradient(to bottom, rgba(173, 216, 230, 0.2), rgba(173, 216, 230, 0)); /* 背景のグラデーションを変更 */
}

/* メニューのスタイル */
.fden-menu {
    display: none; /* 初期状態で非表示 */
    position: absolute; /* 絶対位置を指定 */
    top: 40px; /* 上から40pxの位置に配置 */
    left: 0; /* 左端に配置 */
    background-color: white; /* 背景色を白に設定 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 影を追加 */
    z-index: 1000; /* 重なり順を設定 */
    opacity: 0; /* 初期状態で透明 */
    transition: opacity 0.5s ease, transform 0.5s ease; /* 透明度と変形にアニメーションを追加 */
    transform: translateY(-10px); /* 初期状態で少し上に移動 */
}

/* メニューが表示されたときのスタイル */
.fden-menu.show {
    display: block; /* 表示 */
    opacity: 1; /* 不透明に設定 */
    transform: translateY(0); /* 元の位置に移動 */
}

/* メニュー内のリンクのスタイル */
.fden-menu a {
    display: block; /* ブロック要素として表示 */
    padding: 15px; /* 内側の余白を設定 */
    text-decoration: none; /* 下線をなしにする */
    color: black; /* 文字色を黒に設定 */
    transition: background 0.3s ease-in-out; /* 背景色の変化にアニメーションを追加 */
}

/* メニュー内のリンクをホバーしたときのスタイル */
.fden-menu a:hover {
    background-color: #e0e0e0; /* 背景色を変更 */
}

/* サブメニューのスタイル */
.fden-submenu {
    display: none; /* 初期状態で非表示 */
    padding-left: 20px; /* 左に余白を設定 */
    opacity: 0; /* 初期状態で透明 */
    transition: opacity 0.5s ease, transform 0.5s ease; /* 透明度と変形にアニメーションを追加 */
    transform: translateY(-10px); /* 初期状態で少し上に移動 */
}

/* サブメニューが表示されたときのスタイル */
.fden-submenu.show {
    display: block; /* 表示 */
    opacity: 1; /* 不透明に設定 */
    transform: translateY(0); /* 元の位置に移動 */
}

/* サブメニューのトグルボタン1のスタイル */
.fden-menu .fden-submenu-toggle1 {
    font-weight: bold; /* 文字を太字にする */
    color: #1A73E8; /* 文字色を設定 (Google blue) */
    cursor: pointer; /* カーソルをポインターに変更 */
}

/* サブメニューのトグルボタン2のスタイル */
.fden-menu .fden-submenu-toggle2 {
    font-weight: bold; /* 文字を太字にする */
    color: #00A2ED; /* 文字色を設定 (Microsoft blue) */
    cursor: pointer; /* カーソルをポインターに変更 */
}

/* ビューポートの幅が768px以下の場合のスタイル */
@media (max-width: 768px) {
    .fden-hamburger-button {
        font-size: 14px; /* フォントサイズを14pxに設定 */
        padding: 8px; /* 内側の余白を縮小 */
    }

    .fden-menu a {
        padding: 10px; /* 内側の余白を縮小 */
    }
}
    

transition: background 0.3s ease-in-out, color 0.3s ease-in-out; /* 背景色と文字色の変化にアニメーションを追加 */

opacity: 0; /* 初期状態で透明 */
transition: opacity 0.5s ease, transform 0.5s ease; /* 透明度と変形にアニメーションを追加 */
transform: translateY(-10px); /* 初期状態で少し上に移動 */

.fden-menu.show {
    display: block; /* 表示 */
    opacity: 1; /* 不透明に設定 */
    transform: translateY(0); /* 元の位置に移動 */
}

transition: background 0.3s ease-in-out; /* 背景色の変化にアニメーションを追加 */

opacity: 0; /* 初期状態で透明 */
transition: opacity 0.5s ease, transform 0.5s ease; /* 透明度と変形にアニメーションを追加 */
transform: translateY(-10px); /* 初期状態で少し上に移動 */

.fden-submenu.show {
    display: block; /* 表示 */
    opacity: 1; /* 不透明に設定 */
    transform: translateY(0); /* 元の位置に移動 */
}

function toggleMenu() {
 var menu = document.getElementById('fden-menu');
 var button = document.getElementById('fden-hamburger-button');
 if (menu.classList.contains('show')) {
  menu.classList.remove('show');
  button.innerHTML = '☰ メニューを開く ▼';
  setTimeout(function () {
   menu.style.display = 'none';
  }, 300);
 } else {
  menu.style.display = 'block';
  button.innerHTML = '× メニューを閉じる ▲';
  setTimeout(function () {
   menu.classList.add('show');
  }, 10);
 }
}

function toggleSubMenu(id, buttonId) {
 var submenu = document.getElementById(id);
 var button = document.getElementById(buttonId);
 if (submenu.classList.contains('show')) {
  submenu.classList.remove('show');
  button.innerHTML = button.innerHTML.replace('▲', '▼');
  setTimeout(function () {
   submenu.style.display = 'none';
  }, 300);
 } else {
  submenu.style.display = 'block';
  button.innerHTML = button.innerHTML.replace('▼', '▲');
  setTimeout(function () {
   submenu.classList.add('show');
  }, 10);
 }
}

document.addEventListener('DOMContentLoaded', function () {
 fetch('../menu/menu.html')
  .then(response => response.text())
  .then(data => {
   document.getElementById('fden-menu-content').innerHTML = data;
  });

 document.addEventListener('click', function (event) {
  var menu = document.getElementById('fden-menu');
  var button = document.getElementById('fden-hamburger-button');
  var isClickInside = menu.contains(event.target) || button.contains(event.target);
  if (!isClickInside && menu.classList.contains('show')) {
   menu.classList.remove('show');
   button.innerHTML = '☰ メニューを開く ▼';
   setTimeout(function () {
    menu.style.display = 'none';
   }, 300);
  }
 });
});
    

function toggleMenu() {
 var menu = document.getElementById('fden-menu');
 var button = document.getElementById('fden-hamburger-button');
 if (menu.classList.contains('show')) {
  menu.classList.remove('show');
  button.innerHTML = '☰ メニューを開く ▼';
  setTimeout(function () {
   menu.style.display = 'none';
  }, 300);
 } else {
  menu.style.display = 'block';
  button.innerHTML = '× メニューを閉じる ▲';
  setTimeout(function () {
   menu.classList.add('show');
  }, 10);
 }
}

var menu = document.getElementById('fden-menu');
var button = document.getElementById('fden-hamburger-button');
   

if (menu.classList.contains('show')) {
 menu.classList.remove('show');
 button.innerHTML = '☰ メニューを開く ▼';
 setTimeout(function () {
  menu.style.display = 'none';
 }, 300);
} else {
 menu.style.display = 'block';
 button.innerHTML = '× メニューを閉じる ▲';
 setTimeout(function () {
  menu.classList.add('show');
 }, 10);
}

   

function toggleSubMenu(id, buttonId) {
 var submenu = document.getElementById(id);
 var button = document.getElementById(buttonId);
 if (submenu.classList.contains('show')) {
  submenu.classList.remove('show');
  button.innerHTML = button.innerHTML.replace('▲', '▼');
  setTimeout(function () {
   submenu.style.display = 'none';
  }, 300);
 } else {
  submenu.style.display = 'block';
  button.innerHTML = button.innerHTML.replace('▼', '▲');
  setTimeout(function () {
   submenu.classList.add('show');
  }, 10);
 }
}

var submenu = document.getElementById(id);
var button = document.getElementById(buttonId);
   

if (submenu.classList.contains('show')) {
 submenu.classList.remove('show');
 button.innerHTML = button.innerHTML.replace('▲', '▼');
 setTimeout(function () {
  submenu.style.display = 'none';
 }, 300);
} else {
 submenu.style.display = 'block';
 button.innerHTML = button.innerHTML.replace('▼', '▲');
 setTimeout(function () {
  submenu.classList.add('show');
 }, 10);
}
   

document.addEventListener('DOMContentLoaded', function () {
 fetch('../menu/menu.html')
  .then(response => response.text())
  .then(data => {
   document.getElementById('fden-menu-content').innerHTML = data;
  });

 document.addEventListener('click', function (event) {
  var menu = document.getElementById('fden-menu');
  var button = document.getElementById('fden-hamburger-button');
  var isClickInside = menu.contains(event.target) || button.contains(event.target);
  if (!isClickInside && menu.classList.contains('show')) {
   menu.classList.remove('show');
   button.innerHTML = '☰ メニューを開く ▼';
   setTimeout(function () {
    menu.style.display = 'none';
   }, 300);
  }
 });
});

document.addEventListener('DOMContentLoaded', function () {
 fetch('../menu/menu.html')
  .then(response => response.text())
  .then(data => {
   document.getElementById('fden-menu-content').innerHTML = data;
  });
   

document.addEventListener('click', function (event) {
 var menu = document.getElementById('fden-menu');
 var button = document.getElementById('fden-hamburger-button');
 var isClickInside = menu.contains(event.target) || button.contains(event.target);
 if (!isClickInside && menu.classList.contains('show')) {
  menu.classList.remove('show');
  button.innerHTML = '☰ メニューを開く ▼';
  setTimeout(function () {
   menu.style.display = 'none';
  }, 300);
 }
});
   

document.addEventListener("DOMContentLoaded", function () {
 const links = document.querySelectorAll(".animated-link");
 links.forEach(link => {
  link.classList.add("loaded");
 });
});