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

###### `Bootstrap5`

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

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

[CodePen](https://codepen.io/J_u_d_y/pen/eYPWydy)

**解決做法有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](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 下拉選單沒反應](https://www.dotblogs.com.tw/YiruAtStudio/2021/05/12/105216)