小毛病：解決 BS5 dropdown menu 無法顯示問題 (Why BS5 dropdown menu is not working?)

Bootstrap5

遇到的鬼打牆＋鬼遮眼狀況是，明明 BS5 css 有引入，而且完全複製官方的 Demo 程式碼，但是在官網可以正常運作下拉選單，一旦換成自己的 Codepen 卻點擊毫無反應？

結果是…要記得引入BS5 的 JS 的 CDN 啦！

CodePen

解決做法有2種，選擇其中1種方式引入CDN即可

Separate 分開引入需要的 JS

CDN import order 01: 
https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.7/umd/popper.min.js

CDN import order 02 :
https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js

• popper.min.js 用來顯示 dropdown 清單
• bootstrap.min.js 用來顯示手機版的漢堡清單 (hamburger menu)

引入順序很重要，popper > bootstrap，因為 bootstrap 裡面有用到 popper

或是

Bundle 只引入一個全部都包含的 JS

Import only 1 CDN : 
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js

除此了正確引入CDN之外，還要注意 BS5 html 結構。

注意 ID 名稱

Hamburger Menu

• data-bs-target="#navbarNavDropdown"
• id="navbarDropdownMenuLink"

Dropdown Menu

• id="navbarDropdownMenuLink"
• aria-labelledby="navbarDropdownMenuLink"

fixed-top 屬性清單會遮擋內容

fixed-top
能固定導覽列釘死頂端，不過下拉式清單出現時會擋住內容，其他元素有點像是無視選單的空間份量。

設定 position: fixed 的元素會從文件流跳脫出來，所以其他元素不會再尊重 fixed 元素的空間，導致下拉選單會跟內容重疊在一起 overlap。

sticky-top

若改成用 sticky-top，下拉選單出現時，頁面上其他元素會很像選單給被推走，選單和元素不重疊，但是，這也只有在開頭時會推走，一旦網頁滑到中段，再點開下拉選單，推擠效果消失，選單還是會蓋住內容的。另外還要注意， position: sticky 目前有些瀏覽器還是不支援。

官方文件解釋：https://getbootstrap.com/docs/5.1/components/navbar/#placement

標籤結構

• <nav>標籤之內還會再包一個 div 才是 <ul class="navbar-nav ms-auto"> 再來才是清單項目<li class="nav-item">

• collapse 意思是預設隱藏，也就是清單預設是隱藏，因此父層 nav 要記得設定 navbar-expand-m，表示在某種螢幕寬度下(md)展開，才看得到選單。

<nav class="navbar navbar-expand-md fixed-top ">

<nav class="navbar navbar-expand-md sticky-top">

<div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>

參考文章 : Yiru@Studio Bootstrap 下拉選單沒反應