CSS Dropdown Menu

Opret en hævbar rullemenu med CSS.

Demonstration: Rullemenu case

Eksempel

Flyt musemarkøren til nedenstående eksempel:

Rullemenu tekst

Hello World!

Lenke 1 Lenke 2 Lenke 3
Billede:kaffe
kaffe
Kaffe

Basis rullemenu

Opret en rullemenu, der vises, når brugeren flytter musen over elementet.

Eksempel

<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>Mus over mig</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Prøv selv

Eksempel forklaring:

HTML

Åbn rullemenuens indhold med enhver element, f.eks. <span> eller <button>-element.

Opret rullemenuens indhold ved hjælp af en container-element (som <div>) og tilføj ethvert indhold deri.

Omslør disse elementer med et <div>-element og brug CSS til at positionere rullemenuens indhold korrekt.

CSS

.dropdown Klassen bruges position: relative，når vi ønsker at placere rullemenuens indhold direkte under rullemenuknappen (brug position: absolute). Brug denne klasse.

.dropdown-content Klassen gemmer den faktiske indhold af rullemenuen. Som standard er den skjult og vises ved musoverførsel (se nedenfor). Bemærk,min-width Sæt til 160px. Du kan altid ændre denne indstilling. Bemærk: Hvis du vil have indholdets bredde i rullemenuen at være den samme som knappen, sæt bredden til 100% (indstilling overflow: auto Kan gøres til at rulle på små skærme).

Vi brugte CSS box-shadow egenskab, i stedet for kant, så dropdown-menuen ser ud som et "kort".

når brugeren flytter musen hen over dropdown-knappen,:hover Vælger bruges til at vise dropdown-menuen.

Dropdown-menu

Opret en dropdown-menu og lad brugeren vælge en mulighed fra listen:

Lenke 1 Lenke 2 Lenke 3

Dette eksempel er lignende til det forrige, med undtagelse af at vi har tilføjet et link i dropdown-boksen og har sat stilen til at matche stilen på dropdown-knappen:

Eksempel

<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="#">Lenke 1</a>
    <a href="#">Lenke 2</a>
    <a href="#">Lenke 3</a>
  </div>
</div>

Prøv selv

Høyrejustert innhold i nedtrekksmeny

Lenke 1 Lenke 2 Lenke 3
Lenke 1 Lenke 2 Lenke 3

Hvis du vil at nedtrekksmenyen skal være fra høyre til venstre i stedet for fra venstre til høyre, legg til høyre: 0;：

Eksempel

.dropdown-content {
  høyre: 0;
}

Prøv selv

Flere eksempler

1 - Nedtrekksbilde

Hvordan legge til bilder og annen innhold i nedtrekksboksen.

Sett musepekeren over bildet:

kaffe
kaffe
Kaffe

Prøv selv

2 - Nedtrekksmeny

Hvordan legge til en nedtrekksmeny i navigasjonsfanen.

Prøv selv