Hur skapa: Klickbar rullgardin
- Föregående sida Hängande nedåttningsmeny
- Nästa sida Kaskadernedåttningsmeny
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:
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:relative
nä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'); } } } }
Högerjusterad nedåtsmeny
Navigationsfältets nedåtsmeny
Sökning (filtrering) nedåtsmeny
Relaterade sidor
Tutorial:CSS-nedåttningsmeny
- Föregående sida Hängande nedåttningsmeny
- Nästa sida Kaskadernedåttningsmeny