如何创建：可点击的下拉菜单

学习如何使用 CSS 和 JavaScript 创建可点击的下拉菜单。

创建可点击的下拉菜单

创建一个当用户单击按钮时出现的下拉菜单。

Kipengele cha kwanza - Ongeza 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>

例子解释：

Inaweza kutumia elementi yoyote kwa kufungua menyu ya kudhaa, kama <button>、<a> au <p> element.

Tumia elementi ya kina (kama <div>) kwa kumwita menyu ya kudhaa, na kuongeza viungo vya menyu ya kudhaa.

Tumia elementi ya <div> kuwarudisha butoni na <div> kuwa na kina, kwa sababu hii inaonesha kuwaona kina ya menyu ya kudhaa kwa kina cha CSS.

Mwaka wa kwanza - Ongeza CSS:

/* Butoni ya kudhaa */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Kichwa chaji na kufikiria kwa butoni ya menyu ya kudhaa */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* Kina <div> - kwa kutambua muungano wa menyu ya kudhaa wa kudhaa anayohitaji elementi za kina */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Muungano wa menyu ya kudhaa (inahifadhiwa kwa kuzingatia kwa kifupi) */
.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;
}
/* Viungo vya menyu ya kudhaa (inayohifadhiwa kwa kuzingatia kwa kifupi) */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Kichwa chaji kwa kufikiria angalaua kwa viungo vya menyu ya kudhaa color */
.dropdown-content a:hover {background-color: #ddd;}
/* 显示下拉菜单（当用户点击下拉菜单按钮时，使用 JS 将此类添加到 .dropdown-content 容器中） */
.show {display:block;}

例子解释：

我们为下拉菜单按钮设置了背景色、内边距、悬停效果等样式。

.dropdown 类使用 position:relative，当我们想要将下拉菜单内容放置在下拉菜单按钮的正下方时（使用 position:absolute），这是必需的。

.dropdown-content 类包含实际的下拉菜单。它默认是隐藏的，并将在鼠标悬停时显示（见下文）。请注意，最小宽度设置为 160px。您可以根据需要更改这个值。提示：如果您希望下拉菜单内容的宽度与下拉菜单按钮一样宽，可以将宽度设置为 100%（并在小屏幕上使用 overflow:auto 以启用滚动）。

Sikuendwa hatutumia mbuga, wakati tunatumia box-shadow mimba, inayotumika kumchora menu ya kufikia kama kadi ya 'kadi'. Sikuendwa tunatumia z-index Ongeza menu ya kufikia kwenye kina kwa kina mengine.

Tatu - Ongeza JavaScript:

/* Kama mtu amekadiri button, kufichua hali ya kufikia kwenye maudhui ya kufikia na kufikia kwenye maudhui ya kufikia */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// Kama mtu amekadiri kwenye nje ya menu ya kufikia, kufungua menu ya kufikia
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');
      }
    }
  }
}

Jaribu kwa kufikia kwa uziiri

Vya kusoma vya kusoma

Mafunzo:Mikadabu ya CSS

Mafunzo:Kisha hizi: Mikadabu ya kusoma