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 linktags, der indlæser de to CSS-typografiark, vi vil bruge i denne vejledning: Font Awesome-typografierne og styles.cssfilen, 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 .dropdowndiv, hvor dropdown element struktur vil blive defineret.
  • Det #resultelement, 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 divindeholdende a titleog menuelementer. 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 resultelement 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 transitionog transformkonstruktioner.

Vær opmærksom på .dropdownklassedefinitionerne. Disse bruges til at definere layoutet til dropdown-beholderkomponenten såvel som dens indre elementer, såsom den .titleog 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:

  1. Klik på rullemenuen
  2. Valg af en af ​​rullemenuen
  3. Ændring af den aktuelt valgte indstilling

Jeg vil gerne gøre det klart, at vi bruger pilefunktioner ( () => {}) og constnø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 toggleMenuDisplaytil klikbegivenhedslytteren i rullemenuen. Denne funktion ændrer visning af dens menuelement ved brug af toggleDisplayog toggleClassfunktioner.

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 handleTitleChangeer bundet til den brugerdefinerede changebegivenhed på .titleelementet for at ændre #resultelementets 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