Sådan oprettes: Klikbare rullemenuer

Lær at bruge CSS og JavaScript til at oprette klikbare rullemenuer.

Opret en klikbar rullemenu

Opret en rullemenu, der vises, når brugeren klikker på knappen.

Første trin - Tilføj 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>

Eksempel Forklaring:

Man kan bruge ethvert element til at åbne dropdown-menu, f.eks. <button>, <a> eller <p>-elementer.

Brug beholder-elementet (som <div>) til at oprette en dropdown-menu, og tilføj dropdown-menu links til den.

Brug <div>-elementet til at omgøre knappen og <div>, så CSS kan定位下拉菜单 korrekt.

Tredje trin - Tilføj 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;}
/* Vis rullemenuen (når brugeren klikker på rullemenuknappen, tilføj denne klasse ved hjælp af JS til .dropdown-content containeren) */
.show {display:block;}

Eksempel Forklaring:

Vi har sat baggrundsfarve, indrykning, hover-effekter osv. til rullemenuknappen.

.dropdown klassen bruger position:relative，når vi vil have at placere rullemenuindholdet nedenfor rullemenuknappen（brug position:absolute）， dette er nødvendigt.

.dropdown-content klassen indeholder den faktiske rullemenu. Den er som standard skjult og vises ved museoverførsel (se nedenfor). Bemærk, at mindste bredde er sat til 160px. Du kan ændre denne værdi efter behov. Tip: Hvis du ønsker, at rullemenuindholdets bredde skal være samme som rullemenuknappen, kan du sætte bredden til 100%（og brug overflow:auto for at aktivere rulning）.

Vi bruger ikke kanter, men box-shadow egenskaben, så rullemenuen ser ud som et "kort" z-index Placer rullemenuen foran andre elementer.

Tredje trin - Tilføj JavaScript:

/* Når brugeren klikker på knappen, skiftes skjult og synlig tilstand for rullemenuindhold */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// Hvis brugeren klikker uden for rullemenuen, lukkes rullemenuen
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');
      }
    }
  }
}

Prøv det selv

Relaterede sider

Tilrettelæggelser:CSS rullemenu

Tilrettelæggelser:Sådan gør man: Hover dropdown menu