網頁日記 #5 | Iris 程式小白

前面幾集已差不多把 JS 基本觀念做了一輪概括性的整理，這集我要來和大家示範如何製作最簡易的下拉式選單，也順便驗收＆應用所學觀念，那我們就不囉唆～ Let’s get rolling!

首先，製作最基礎的下拉式選單需要的是簡單的 HTML 和 CSS 觀念，甚至如果你只需要滑鼠游標 hover 到按鈕上就能展開選單的功能，那你根本不需要動用到 JS。今天小白🙆‍♀️ 我會分享不需要用到 JS 和必需要用到 JS 的下拉式選單版本，對 HTML 和 CSS 不熟悉（忘得差不多）的朋友也可以順便溫故知新唷～ 

不需要用到 JS 的下拉式選單

心中想達到的下拉式選單樣貌：

製作過程只需兩個關鍵步驟：

1. 製作按鈕
2. 設定按鈕 CSS 

一、製作按鈕

🍿說明：放上基本資訊，例如按鈕的名字、選單中的選項和連結

<div class="dropdown">

  <button class="dropdown-button">這是按鈕，游標過來吧！</button>

  <div class="dropdown-list">

 <a href="https://www.facebook.com/groups/936052100195289/">小白社群</a>

    <a href="https://blog.happycoding.today/category/codingwithnewbie/">小白部落格</a>

    <a href="https://open.firstory.me/user/superjunior">小白Podcast頻道</a>

  </div>

</div>

二、設定按鈕 CSS

.dropdown-button {

  background-color: #e691ae;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

}




.dropdown {

  position: relative;

  display: inline-block;

}




.dropdown-list {

  display: none;

  position: relative;

  background-color: #f5c6d6;

  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.4);

  z-index: 1;

}




.dropdown-list a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  min-width: 175px;

  display: block;

}




.dropdown-list a:hover {background-color: #c77f98;}




.dropdown:hover .dropdown-list {display: block;}




.dropdown:hover .dropdown-button {background-color: #ed6191;}

CSS 小補充：

(1) 關於 position… 詳情請參閱這位仁兄的文章

（有關說明 position 的中文文章多半都無法讓我了解透徹～ 不知道大家有沒有同樣的問題）

position: static;   //  簡單來說 static 就是按照各元素原始 default 設定去運作

position: relative;   // relative 意味著「與自身比較」，換句話說就是比 default 的設定多出一些規範，譬如說 top: 10px; （結果就會是比原先應出現的位置下移 10 pixels）

position: absolute;   // 所謂 absolute 就是「想放哪就放哪」，非常自由（同時也打破網頁的 flow 規則），但你就必須另外設定 top, left, bottom, right 來定義位置

position: fixed;  // 如同字面所述，釘選在螢幕上不移動

(2)

display: none;  // 不顯示該元素

display: inline;  // 元素會由左而右排列在一直線上，且無法設定寬度和高度，可以把它想成<span>

display: block;  // 以 block 為單位，佔據一個格子的大小（可另外設定長寬、padding 和 margin），而排列順序為由上至下，不同於以上的 inline

display: inline-block;  // inline-block 就是 inline 和 block 的混合體，外層為 inline（一直條由左而右排列），內層為 block，可參考這個網站上的 demo 

(3)

幾個我覺得很酷的游標樣式，大家可以 try try 看比較清楚

cursor: auto;   // 「編輯/輸入游標」，效果等同於 cursor: text;  

cursor: crosshair;    // 「十字符號」

cursor: pointer;    // 「手指符號」

cursor: move;     // 「移動符號」

cursor: help;     // 「問號符號」

cursor: progress;     // 「處理中符號」

必須用到 JS 的下拉式選單

心中想達到的下拉式選單樣貌：

製作需分為三個關鍵步驟：

1. 製作按鈕
2. 設定按鈕 CSS 
3. 加入 JS 控制選單之收回

注意：此部分需 JS 範例與上一個範例不同之處在於：hover 不需考慮表單的收回問題（因為只有在滑鼠游標移至按鈕上頭時選單才會展開），反觀此範例，需特別再額外設定收回選單的時機，這也牽扯到之前幾集談過的迴圈觀念

一、製作按鈕（這部分與上個部分幾乎相同）

<div class="dropdown">

  <button onclick="showTheList()" class="dropdown-button">我是按鈕～請點擊我</button>

  <div id="iris-dropdown" class="dropdown-list">

    <a href="https://www.facebook.com/groups/936052100195289/">小白社群</a>

    <a href="https://blog.happycoding.today/category/codingwithnewbie/">小白部落格</a>

    <a href="https://open.firstory.me/user/superjunior">小白Podcast頻道</a>

  </div>

</div>

二、設定按鈕 CSS 

.dropdown-button {

  background-color: #f0a8d0;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

  cursor: pointer;

}




.dropdown-button:hover, .dropdown-button:focus {

  background-color: #ed2874;

}




.dropdown-list {

  display: none;

  position: absolute;

  background-color: #fae8f1;

  min-width: 175px;

  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.4);

}




.dropdown-list a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}




.dropdown a:hover {background-color: #ed91b1;}




.showPlease {display: block;}

三、加入 JS 控制選單之收回

🍿說明 1：此時的 JS 功能有二者

1. a) 設定選單展開功能
2. b) 條件式收回選單（當除了點擊按鈕以外的視窗區域都會自動移除選單）

function showTheList() {

  document.getElementById("iris-dropdown").classList.toggle("showPlease");

}


window.onclick = function(event) {

  if (!event.target.matches('.dropdown-button')) {

    var Dropdown = document.getElementsByClassName("dropdown-list");

    var i;

    for (i = 0; i < Dropdown.length; i++) {

      var openTheList = Dropdown[i];

      if (openTheList.classList.contains('showPlease')) {

        openTheList.classList.remove('showPlease');

      }

    }

  }

}

🍿說明 2：迴圈和判斷句寫法解說

if 判斷句假設點擊處不符合 button 的位置，就會開始執行 for 迴圈。當視窗畫面中被點擊區塊符合 button 的 classname 並且符合 Dropdown 裡面的子元素（此處講的是小白相關的露出資訊）就會移除顯示～ 反之，則無變動顯示狀態

那就感謝大家陪伴我學習這麼久的時間，我也會繼續努力 go go 💪 

也和正在閱讀我的日記的人共勉之😎，如果想追蹤後續日記或是和其他新手朋友們一起學習 JS 歡迎加入我開的「程式小白的 JS Python 群」～  

References 參考資料：

1. https://developer.mozilla.org/zh-TW/docs/Web/API/Element/classList
2. https://www.w3schools.com/howto/howto_css_dropdown.asp
3. https://wcc723.github.io/development/2020/02/16/all-new-promise/
4. https://ithelp.ithome.com.tw/articles/10193376
5. http://1-floor.blogspot.com/2016/09/javascript.html
6. https://www.digitalocean.com/community/tutorials/css-display-inline-vs-inline-block
7. https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/