CSS Dropdown Menu

Maak een hoverbare dropdown-list met behulp van CSS.

Demonstratie: Dropdown-casus

Voorbeeld

Plaats de muispunt op het volgende voorbeeld:

Basis dropdown-menu

Maak een dropdown-balk die verschijnt wanneer de gebruiker de muis over het element beweegt.

Voorbeeld

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>Muis over mij</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Probeer het zelf

Voorbeeldverklaring:

HTML

Gebruik elk element om de inhoud van de dropdown te openen, bijvoorbeeld <span> of <button>-elementen.

Maak de inhoud van de dropdown met behulp van een container-element (zoals <div>) en voeg daarin elke inhoud toe.

Gebruik <div>-elementen om deze elementen om te geven en de inhoud van de dropdown correct te positioneren met CSS.

CSS

.dropdown klasse wordt gebruikt position:relative,wanneer we de inhoud van de dropdown onder de knop willen plaatsen (gebruik position:absolute)gebruikt moet worden.

.dropdown-content De klasse slaat de daadwerkelijke inhoud van de dropdown-menu op. Standaard is deze verborgen en wordt getoond bij hover (zie verder). Let op:min-width Wordt ingesteld op 160px. Deze instelling kan altijd worden gewijzigd. Tip: Als u de breedte van de tekenbalk wilt instellen op dezelfde breedte als de knop, stel dan de breedte in op 100% (instelling overflow:auto Kan worden weergegeven in een rolbalk op een klein scherm).

We hebben CSS gebruikt. box-shadow eigenschappen in plaats van randen, zodat het dropdown-menu eruitziet als een "kaart".

wanneer de gebruiker de muis over de dropdown-knop houdt,:hover Selectors worden gebruikt om het dropdown-menu weer te geven.

Dropdown-menu

Maak een dropdown-menu en laat gebruikers een optie uit een lijst kiezen:

Dit voorbeeld is vergelijkbaar met het vorige, behalve dat we een link hebben toegevoegd aan het dropdown-menu en deze hebben geformatteerd om overeen te komen met de stijl van de dropdown-knop:

Voorbeeld

<style>
/* 设置下拉按钮的样式 */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* 容器 <div> - 需要放置下拉内容 */
.dropdown {
  position: relative;
  display: inline-block;
}
/* 下拉内容(默认隐藏) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  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: #f1f1f1}
/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 显示下拉内容时,更改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Probeer het zelf

Rechts afgevlakte dropdown-menu inhoud

Als je wilt dat de dropdown-menu van rechts naar links schuift in plaats van van links naar rechts, voeg dan toe right: 0;:

Voorbeeld

.dropdown-content {
  right: 0;
}

Probeer het zelf

Meer voorbeelden

1 - Dropdown-afbeelding

Hoe je afbeeldingen en andere inhoud toevoegt aan een dropdown-box.

Houd de muispunt op het beeld

Probeer het zelf

2 - Dropdown-menu

Hoe je een dropdown-menu aan de navigatiebalk kunt toevoegen.

Probeer het zelf