Number B07 彈出式選單製作

這篇教學會使用 HTML 的 checkbox 和 label 作為按鈕，實作可以展開或收折的選單，並進一步搭配 button 元素和美化樣式，做出可以一鍵收起和漂亮的特色選單。

概要 點擊帶有 [data-dropdown] 屬性的按鈕可以開、關對應 [id] 的彈出式選單。

瞭解如何使用 CSS 和 JavaScript 建立彈出式表單。 點選頁面底部的按鈕以開啟登入表單。 請注意，按鈕和表單是固定的 - 它們將始終位於瀏覽器視窗的底部。 使用 <form> 元素來處理輸入。 您可以在我們的 PHP 教程中瞭解更多關於此資訊。 <!-- 用於開啟彈出式表單的按鈕 --> <!-- 表單 --> 提示： 前往我們的 HTML 表單教程 瞭解更多關於 HTML 表單的資訊。 提示： 前往我們的 CSS 表單教程 瞭解更多關於如何設定表單元素樣式

選單 一直是製作網頁最基本的功能需求之一，因此對於許多的套件內建都會提供選單的功能，且這些滑動式選單，大部分都是透過 Javascript 所製作而成，最主要的原因就在於，透過 Javascript 可以精準的知道，目前使用是點選 開啟 還是 關閉。 而最近發現一個超酷的寫法，直接透過 HTML 中的核許框，就可判斷目前是開啟還是關閉，再搭配 CSS 就可實作出展開與收合，甚至連漢堡選單的那圖示，也可透過 CSS 繪製出來，且當選單開啟時，還可透過動畫將選單變叉叉的圖示，因此現在就一塊來看看，如何透過純

導覽選單包含按鈕，可使用自動彈出式視窗開啟和關閉。 網頁上的文字會使用提示彈出式視窗顯示內容相關的工具提示。

以往我們要實現下拉式選單大多會使用Javascript或者是Flash，不過現在我們有更簡單的選擇。 今天我們要跟大家分享如何單純使用CSS及HTML製作互動式的下拉選單。

修改以上範例可以看出，如果已經編寫出了一個可用的CSS彈出選單範例，那就要編寫出彈出位置在其他位置的CSS彈出選單的話，只需小小一下就OK了。