目標
補上簡易漢堡選單（不影響你原本架構），改善 360px 的擠壓。

改哪裡：首頁/共用 HTML（header 區）、style.css、小段 jQuery

1. HTML（在 <header> 內的 nav 之前加一個開關容器）

（若已有 .menu 按鈕可沿用）

<button class="menu" aria-label="開啟選單" aria-expanded="false" aria-controls="siteNav">
  <span>☰</span>
</button>
<nav id="siteNav">
  <!-- 原本的 <ul> ... -->
</nav>

2. CSS（加到 style.css）

/* Day 16：手機導覽 */
@media (max-width: 720px){
  nav#siteNav{ display: none; }
  nav#siteNav.open{ display: block; }
  nav#siteNav ul{ flex-direction: column; gap: 8px; padding-top: 8px; }
}

3. JS（放入 js/app.js 結尾的 $(function(){ ... }) 內）

// 手機選單開關
$(document).on('click', '.menu', function(){
  const $nav = $('#siteNav');
  const open = !$nav.hasClass('open');
  $nav.toggleClass('open', open);
  $(this).attr('aria-expanded', open ? 'true' : 'false');
});