Hur skapa: Klickbar rullgardin

Lär dig hur du skapar en klickbar rullgardin med CSS och JavaScript.

Rullgardin

En rullgardin är ett växlingsmeny som låter användaren välja ett värde från en fördefinierad lista:

Prova själv

Skapa en klickbar rullgardin

Skapa en rullgardin som visas när användaren klickar på knappen.

Steg 1 - Lägg till HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Länk 1</a>
    <a href="#">Länk 2</a>
    <a href="#">Länk 3</a>
  </div>
</div>

Exempel på förklaring:

Du kan använda vilket element som helst för att öppna rullgardinsmenyn, t.ex. <button>, <a> eller <p>-element.

Skapa en rullgardinsmeny med en container-element (t.ex. <div>) och lägg till länkar i denna.

Använd <div>-element för att omge knappen och <div>, så att rullgardinsmenyn kan positioneras korrekt med CSS.

Steg 2 - Lägg till CSS:

/* Rullgardinsknapp */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Rullgardinsknappen när musen är över eller fokuserad */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* Container <div> - används för att positionera innehållet i rullgardinsmenyn */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Innehåll i rullgardinssidan (standardvis dold) */
.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;
}
/* Länkar inom rullgardinssidan */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 鼠återflygande ändring av färgen på länkar i rullgardinssidan när musen är över dem */
.dropdown-content a:hover {background-color: #ddd;}
/* Visa nedåtsmenyen (när användaren klickar på nedåtsmenyknappen, lägg till denna klass till .dropdown-content-container med hjälp av JS) */
.show {display:block;}

Exempel på förklaring:

Vi har satt bakgrundsfärg, inre marginaler, hover-effekter och andra stilar för nedåtsmenyknappen.

.dropdown klassen använder position:relativenär vi vill placera nedåtsmenyinnehållet precis under nedåtsmenyknappen (använd position:absolute)

.dropdown-content klassen innehåller den faktiska nedåtsmenyen. Den är som standard dold och visas när musen hålls över (se nedan).Observera att minsta bredd är satt till 160px. Du kan ändra detta värde efter behov. Tips: Om du vill att nedåtsmenyinnehållet ska vara lika brett som nedåtsmenyknappen, kan du sätta bredden till 100% (och använda overflow:auto för att möjliggöra rullning).

Vi använder inte kanter, utan box-shadow egenskapen, så att nedåtsmenyen ser ut som ett "kort" kort. Vi använder också z-index Placera nedåtsmenyen framför andra element.

Steg 3 - Lägg till JavaScript:

/* När användaren klickar på knappen, växla dolda och synliga stater för innehållet i nedåtsmenyen */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// Om användaren klickar utanför nedåtsmenyen, stäng nedåtsmenyen
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');
      }
    }
  }
}

Prova själv

Högerjusterad nedåtsmeny

Prova själv

Navigationsfältets nedåtsmeny

Prova själv

Sökning (filtrering) nedåtsmeny

Prova själv

Relaterade sidor

Tutorial:CSS-nedåttningsmeny

Tutorial:Hur man skapar: En hängande nedåttningsmeny