How to Create: Clickable Dropdown Menus

Learn how to create clickable dropdown menus using CSS and JavaScript.

Create clickable dropdown menus

Create a dropdown menu that appears when the user clicks the button.

Step 1 - Add 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>

.show {display:block;}

可以使用任何元素来打开下拉菜单，例如 <button>、<a> 或 <p> 元素。

使用容器元素（如 <div>）来创建下拉菜单，并在其中添加下拉菜单链接。

使用 <div> 元素将按钮和 <div> 包裹起来，以便使用 CSS 正确定位下拉菜单。

第二步 - 添加 CSS：

/* 下拉按钮 */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* 鼠标悬停和聚焦时的下拉菜单按钮 */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* 容器 <div> - 用于定位下拉菜单内容所需的元素 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* 下拉菜单内容（默认隐藏） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 下拉菜单内的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 鼠标悬停时更改下拉菜单链接的颜色 */
.dropdown-content a:hover {background-color: #ddd;}
/* 显示下拉菜单（当用户点击下拉菜单按钮时，使用 JS 将此类添加到 .dropdown-content 容器中） */
/* Show the dropdown menu (when the user clicks the dropdown menu button, use JS to add this class to the .dropdown-content container) */

.show {display:block;}

Example Explanation:

we set the background color, padding, hover effects, and other styles for the dropdown menu button. class) position:relativewhen we want to place the dropdown menu content directly below the dropdown menu button (using position:absolute)), this is necessary.

.dropdown-content The class contains the actual dropdown menu. It is default hidden and will be displayed when the mouse hovers over it (see below). Note that the minimum width is set to 160px. You can change this value as needed. Tip: If you want the width of the dropdown menu content to be the same as the dropdown menu button, you can set the width to 100% (and use overflow:auto to enable scrolling).

We did not use borders but instead used box-shadow property, making the dropdown menu look like a "card". We also use z-index Place the dropdown menu in front of other elements.

Third step - Add JavaScript:

/* Toggle the hide and show state of the dropdown menu content when the user clicks the button */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// If the user clicks outside the dropdown menu, close the dropdown menu
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');
      }
    }
  }
}

Try it yourself

Related pages

Tutorial:CSS dropdown menu

Tutorial:How to create a hoverable dropdown menu