U ovom ćete tutorijalu naučiti kako stvoriti jednostavan padajući izbornik s vanilin Javascriptom, HTML-om i CSS-om. Proći ćemo kroz HTML, CSS i Javascript kôd, ali obraćajući više pažnje na programiranje, jer je ovo JS tutorial. Koristit ćemo obične JS i CSS, bez okvira ili pretprocesora. Jedina (vrsta) iznimke bit će uvoz CSS datoteke Font Awesome jer ćemo koristiti jednu od njezinih ikona.
Ovo je namijenjeno programerima koji prosječno razumiju HTML, CSS i JS. Pokušao sam to učiniti što čišćim, ali ovdje se neću previše usredotočiti na detalje. Nadam se da ćete svi uživati.
Snimke zaslona
Ovako izgleda rezultat koda:
Početni zaslon:
Otvoren padajući meni:
Padajući izbornik s odabranom opcijom:
HTML:
U ovom ćemo odjeljku razgovarati o implementaciji HTML koda za demo stranicu. Za početak, pogledajmo kod
Dropdown Example To je u osnovi HTML glavni obrazac, s izuzetkom linkoznaka koje učitavaju dva CSS lista stilova koje ćemo koristiti u ovom vodiču: Font Awesome stilove i styles.cssdatoteku, u kojoj ćemo definirati stilove ove stranice.
Zatim, tu je ostatak HTML datoteke, tijelo:
Select an option Option 1 Option 2 Option 3 Option 4 The result is: ... Ovaj se odjeljak može podijeliti u 3 glavna dijela:
.dropdownDiv, gdje će se definirati strukturu padajućeg elementa.#resultElement koji će sadržavati odabranu opciju od strane korisnika, iz padajućeg elementa.- Skripta zapisana u
oznaku. Njegova je implementacija ovdje skrivena, jer će njezini detalji biti objašnjeni u posljednjem odjeljku ovog vodiča.
Padajući element divsadrži elemente a titlei menu. Prva samo definira koji će tekst biti predstavljen na elementu prije nego što se odabere bilo koja opcija, a druga će definirati opcije koje će element moći odabrati.
resultElement je tu samo da vam pokazati što je opcija trenutno odabran.
Stilovi:
Ispod možete provjeriti css css kôd. Kao što vidite, koristi CSS3 transitioni transformkonstrukcije.
Molimo obratite pažnju na .dropdowndefinicije klasa. Oni se koriste za definiranje izgleda komponente padajućeg spremnika, kao i njezinih unutarnjih elemenata, kao što su .titlei .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:
Sad ćemo vidjeti kako je implementiran Javascript dio. Prvo ćemo proći kroz definicije funkcija, a zatim kôd koji poziva te funkcije da bismo izvršili padajuće akcije.
U osnovi postoje 3 radnje koje se odvijaju ovisno o interakciji korisnika jer su njihovi slušatelji dodani u DOM elemente:
- Klik na padajući element
- Odabir jedne od padajućih opcija
- Promjena trenutno odabrane opcije
Želio bih razjasniti da koristimo funkcije strelice ( () => {}) i constključnu riječ, a to su ES6 značajke. Vjerojatno ste dobri ako upotrebljavate noviju verziju preglednika, ali imajte to na umu.
1. Klik na padajući element
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'); }Kada se klikne padajući element, on se otvara (ako je zatvoren) ili zatvara (ako je otvoren). To se događa vezivanjem toggleMenuDisplayslušatelja događaja klika na padajućem elementu. Ova funkcija prebacuje prikaz svog menuelementa pomoću od toggleDisplayte toggleClassfunkcije.
2. Odabir jedne od padajućih opcija
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. Promjena trenutno odabrane opcije
function handleTitleChange(e){ const result = document.getElementById('result'); result.innerHTML = 'The result is: ' + e.target.textContent; }Funkcija handleTitleChangeje vezana uz prilagođeni changedogađaj na .titleelementu, da bi promijenila #resultsadržaj elementa kad god se promijeni naslovni element. Pokretanje ovog događaja vrši se u prethodnom odjeljku.
Glavni kod
//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);U glavnom odjeljku nalazi se samo neki jednostavni kod za dobivanje naslova padajućeg naslova i elemenata opcija koji na njih vežu događaje o kojima je bilo riječi u posljednjem odjeljku.
Demo
Pun kôd i demo aplikacije možete pronaći ovdje.
More Information
- ES6 introduction
- Arrow functions
- Let and Const