了解如何創建CSS和JavaScript可點擊下拉菜單。
落下
一個下拉菜單是一個可切換的菜單，允許用戶選擇從預定義列表中的一個值：
創建一個可點擊下拉
創建當用戶點擊一個按鈕，在出現的下拉菜單。
步驟1）添加HTML：
例
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>例子解釋：
使用任何元件來打開下拉菜單，例如<按鈕>， <a>或<p>元件。
使用的容器元件(like <div>)以創建下拉菜單，然後添加在它裡面的下拉鏈接。
緊裹<div>按鈕周圍元件和<div>與CSS正確定位的下拉菜單。
步驟2）添加CSS：
例
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown
button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display:block;}例子解釋：
我們風格與背景顏色，填充的下拉按鈕，懸停效果，等等。
所述.dropdown類使用position:relative ，當我們要下拉內容這是需要正下方的下拉按鈕被放置(using position:absolute ) 。
該.dropdown-content類包含實際的下拉菜單。 它默認是隱藏的，並會顯示在懸停(see below) 。 注意min-width被設置為160像素。 隨意改變這一點。 提示：如果您想下拉內容的寬度一樣寬的下拉按鈕，在設置width為100％（和overflow:auto ，以使在小屏幕上滾動）。
而不是使用一個邊界，我們使用box-shadow屬性，以使下拉菜單看起來像一個"card" 。
步驟3）添加JavaScript的：
例
/* When the user clicks on the button,
toggle between hiding and showing
the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
} 試一試» 在導航欄下拉菜單
提示：去我們的CSS教程下拉框 ，以了解更多有關下拉列表。