Kuidas luua CSS-i ja JavaScripti abil rippmenüüd

Selles õpetuses saate teada, kuidas luua lihtsat rippmenüüd koos vanilje Javascripti, HTML-i ja CSS-iga. Vaatame läbi HTML-, CSS- ja Javascripti koodi, kuid pöörame rohkem tähelepanu programmeerimisele, kuna see on JS-i õpetus. Kasutame lihtsalt JS-i ja CSS-i, ilma raamistike ja eeltöötlusteta. Ainus (liiki) erand on Font Awesome CSS-faili importimine, kuna me kasutame ühte selle ikoonidest.

See on suunatud arendajatele, kes mõistavad keskmiselt HTML-i, CSS-i ja JS-i. Püüdsin selle võimalikult puhtaks teha, kuid ma ei keskendu siin liiga detailidele. Loodan, et teile kõigile meeldib.

Ekraanipildid

Nii näeb kooditulemus välja:

Esialgne ekraan:

Avatud rippmenüü:

Rippmenüü valitud suvandiga:

HTML:

Selles jaotises käsitleme demolehe HTML-koodi rakendamist. Alustuseks vaatame koodi

      Dropdown Example   

Põhimõtteliselt on see HTML-i peakatel, välja arvatud linksildid, mis laadivad kahte CSS-i stiilitabelit, mida selles õpetuses kasutame: stiilid Font Awesome ja styles.cssfail, kus määratleme selle lehe stiilid.

Siis on ülejäänud HTML-fail, keha:

 Select an option  Option 1 Option 2 Option 3 Option 4 The result is:   ...   

Selle jaotise saab jagada kolmeks põhiosaks:

  • .dropdownDiv, kus rippmenüüst elemendi struktuur on määratletud.
  • #resultElement, mis sisaldavad valitud variant kasutaja, rippmenüüst element.
  • Sildi sisse kirjutatud skript . Selle juurutamine on siin peidetud, kuna selle üksikasju selgitatakse selle õpetuse viimases osas.

Rippmenüü element divsisaldab elemente a titleja menu. Esimene määratleb lihtsalt, millist teksti elemendil esitatakse enne mis tahes valiku valimist, ja teine ​​määrab elemendi poolt valitavad suvandid.

resultElement on seal lihtsalt näidata, mida valik on valitud.

Stiilid:

Allpool saate kontrollida täielikku css-koodi. Nagu näete, kasutab see CSS3 transitionja transformkonstruktsioone.

Palun pöörake tähelepanu .dropdownklasside definitsioonidele. Neid kasutatakse, et määrata paigutuse rippmenüüst konteiner komponent samuti selle sisesahtlitega, nagu .titleja selle .option's.

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:

Nüüd näeme, kuidas JavaScripti osa rakendatakse. Kõigepealt vaatame läbi funktsioonide definitsioonid ja seejärel koodi, mis kutsub neid funktsioone rippmenüüde toimimiseks.

Põhimõtteliselt on 3 toimingut, mis toimuvad sõltuvalt sellest, milline on kasutaja interaktsioon, kuna nende kuulajad lisatakse DOM-i elementidele:

  1. Klõpsates rippmenüüelementi
  2. Ühe rippmenüüvaliku valimine
  3. Praegu valitud suvandi muutmine

Soovin teha selgeks, et kasutame noole funktsioone ( () => {}) ja constmärksõna, mis on ES6 funktsioonid. Tõenäoliselt olete hea, kui kasutate oma brauseri uusimat versiooni, kuid pidage seda meeles.

1. Klõpsates rippmenüü elementi

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'); }

Kui rippmenüüelementi klõpsatakse, avaneb see (kui see on suletud) või sulgub (kui see on avatud). See juhtub, sidudes toggleMenuDisplayrippmenüü elemendi kliki sündmuste kuulajaga. See funktsioon vahetab oma menuelemendi kuvamist funktsioonide toggleDisplayja toggleClassabil.

2. Valige üks rippmenüüst

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. Praegu valitud suvandi muutmine

function handleTitleChange(e){ const result = document.getElementById('result'); result.innerHTML = 'The result is: ' + e.target.textContent; }

Funktsioon handleTitleChangeon seotud elemendi kohandatud changesündmusega .title, et muuta #resultelemendi sisu alati, kui pealkirja element muutub. Selle sündmuse käivitamine toimub eelmises jaotises.

Peamine kood

//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);

Peaosas on vaid mõni lihtne kood, et saada rippmenüü pealkiri ja valikuelemendid, et siduda nendega viimases osas käsitletud sündmused.

Demo

Selle rakenduse täieliku koodi ja demo leiate siit.

Rohkem informatsiooni

  • ES6 sissejuhatus
  • Noolefunktsioonid
  • Let ja Const