Sådan oprettes en rullemenu med CSS og JavaScript
I denne tutorial lærer du, hvordan du opretter en simpel rullemenu med vanilje Javascript, HTML og CSS. Vi vil gennemgå HTML-, CSS- og Javascript-koden, men være mere opmærksomme på programmeringen, da dette er en JS-tutorial. Vi bruger bare almindelig JS og CSS uden rammer eller præprocessorer. Den eneste (slags) undtagelse er at importere Font Awesome CSS-filen, fordi vi bruger et af dens ikoner.
Dette er målrettet mod udviklere, der har en gennemsnitlig forståelse af HTML, CSS og JS. Jeg forsøgte at gøre det så rent som muligt, men jeg vil ikke fokusere for meget på detaljer her. Jeg håber, at I alle kan lide det
Skærmbilleder
Sådan ser koderesultatet ud:
Startskærm:

Dropdown åbnet:

Dropdown med valgt mulighed:

HTML:
I dette afsnit vil vi diskutere implementeringen af HTML-koden til demosiden. For at starte, lad os se koden
Dropdown Example
Dette er grundlæggende HTML-kedelplade med undtagelse af link
tags, der indlæser de to CSS-typografiark, vi vil bruge i denne vejledning: Font Awesome-typografierne og styles.css
filen, hvor vi definerer denne sides typografier.
Derefter er der resten af HTML-filen, kroppen:
Select an option Option 1 Option 2 Option 3 Option 4 The result is: ...
Dette afsnit kan opdeles i 3 hoveddele:
- Den
.dropdown
div, hvor dropdown element struktur vil blive defineret. - Det
#result
element, der vil indeholde den valgte indstilling af brugeren, fra dropdown element. - Scriptet skrevet ind i
tagget. Dens implementering er skjult her, fordi dens detaljer vil blive forklaret i sidste afsnit af denne vejledning.
Dropdown-elementet er et div
indeholdende a title
og menu
elementer. Førstnævnte definerer bare, hvilken tekst der vil blive præsenteret på elementet, før en valgmulighed vælges, og sidstnævnte definerer de muligheder, der kan vælges af elementet.
Det result
element er der bare for at vise dig, hvad indstilling er valgt i øjeblikket.
Stilarter:
Nedenfor kan du tjekke den fulde css-kode. Som du kan se, gør det brug af CSS3 transition
og transform
konstruktioner.
Vær opmærksom på .dropdown
klassedefinitionerne. Disse bruges til at definere layoutet til dropdown-beholderkomponenten såvel som dens indre elementer, såsom den .title
og dens .option
.
body{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .hide { max-height: 0 !important; } .dropdown{ border: 0.1em solid black; width: 10em; margin-bottom: 1em; } .dropdown .title{ margin: .3em .3em .3em .3em; width: 100%; } .dropdown .title .fa-angle-right{ float: right; margin-right: .7em; transition: transform .3s; } .dropdown .menu{ transition: max-height .5s ease-out; max-height: 20em; overflow: hidden; } .dropdown .menu .option{ margin: .3em .3em .3em .3em; margin-top: 0.3em; } .dropdown .menu .option:hover{ background: rgba(0,0,0,0.2); } .pointerCursor:hover{ cursor: pointer; } .rotate-90{ transform: rotate(90deg); }
JavaScript:
Nu ser vi, hvordan Javascript-delen implementeres. Vi gennemgår først funktionsdefinitionerne og derefter koden, der kalder disse funktioner for at få dropdown-handlingerne til at ske.
Dybest set er der 3 handlinger, der finder sted, afhængigt af hvad brugerinteraktionen er, da deres lyttere føjes til DOM-elementerne:
- Klik på rullemenuen
- Valg af en af rullemenuen
- Ændring af den aktuelt valgte indstilling
Jeg vil gerne gøre det klart, at vi bruger pilefunktioner ( () => {}
) og const
nøgleordet, som er ES6-funktioner. Du er sandsynligvis god, hvis du bruger en nyere version af din browser, men husk det.
1. Klik på rullemenuen
function toggleClass(elem,className){ if (elem.className.indexOf(className) !== -1){ elem.className = elem.className.replace(className,''); } else{ elem.className = elem.className.replace(/\s+/g,' ') + ' ' + className; } return elem; } function toggleDisplay(elem){ const curDisplayStyle = elem.style.display; if (curDisplayStyle === 'none' || curDisplayStyle === ''){ elem.style.display = 'block'; } else{ elem.style.display = 'none'; } } function toggleMenuDisplay(e){ const dropdown = e.currentTarget.parentNode; const menu = dropdown.querySelector('.menu'); const icon = dropdown.querySelector('.fa-angle-right'); toggleClass(menu,'hide'); toggleClass(icon,'rotate-90'); }
Når der klikkes på dropdown-elementet, åbnes det (hvis det er lukket) eller lukkes (hvis det åbnes). Dette sker ved at binde sig toggleMenuDisplay
til klikbegivenhedslytteren i rullemenuen. Denne funktion ændrer visning af dens menu
element ved brug af toggleDisplay
og toggleClass
funktioner.
2. Valg af en af rullemenuen
function handleOptionSelected(e){ toggleClass(e.target.parentNode, 'hide'); const id = e.target.id; const newValue = e.target.textContent + ' '; const titleElem = document.querySelector('.dropdown .title'); const icon = document.querySelector('.dropdown .title .fa'); titleElem.textContent = newValue; titleElem.appendChild(icon); //trigger custom event document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); //setTimeout is used so transition is properly shown setTimeout(() => toggleClass(icon,'rotate-90',0)); }
3. Ændring af den aktuelt valgte indstilling
function handleTitleChange(e){ const result = document.getElementById('result'); result.innerHTML = 'The result is: ' + e.target.textContent; }
Funktionen handleTitleChange
er bundet til den brugerdefinerede change
begivenhed på .title
elementet for at ændre #result
elementets indhold, når titelelementet ændres. Denne begivenheds udløsning sker i det foregående afsnit.
Hovedkode
//get elements const dropdownTitle = document.querySelector('.dropdown .title'); const dropdownOptions = document.querySelectorAll('.dropdown .option'); //bind listeners to these elements dropdownTitle.addEventListener('click', toggleMenuDisplay); dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);
I hovedsektionen er der bare en simpel kode for at få rullelistens titel og valgelementer til at binde dem til begivenhederne, der blev diskuteret i sidste afsnit.
Demo
Denne applikations fulde kode og demo kan findes her.
Mere information
- ES6 introduktion
- Pilfunktioner
- Lad og konst