Kaip sukurti išskleidžiamąjį meniu su CSS ir „JavaScript“

Šioje pamokoje sužinosite, kaip sukurti paprastą išskleidžiamąjį meniu su vaniliniu „Javascript“, HTML ir CSS. Mes pereisime per HTML, CSS ir „Javascript“ kodą, tačiau daugiau dėmesio skirsime programavimui, nes tai yra JS pamoka. Mes naudosime paprastą JS ir CSS, be rėmų ar išankstinių procesorių. Vienintelė (rūšies) išimtis bus „Font Awesome CSS“ failo importavimas, nes naudosime vieną iš jo piktogramų.

Tai skirta kūrėjams, kurie vidutiniškai supranta HTML, CSS ir JS. Stengiausi, kad jis būtų kuo švaresnis, tačiau per daug nesiorientuosiu į detales. Tikiuosi, kad jums visiems patiks.

Ekrano nuotraukos

Taip atrodo kodo rezultatas:

Pradinis ekranas:

Atidarytas išskleidžiamasis meniu:

Išskleidžiamasis meniu su pasirinkta parinktimi:

HTML:

Šiame skyriuje aptarsime demonstracinio puslapio HTML kodo diegimą. Norėdami pradėti, pažiūrėkime kodą

      Dropdown Example   

Iš esmės tai yra HTML galvutės katilinė, išskyrus linkžymes, įkeliančias du CSS stiliaus lapus, kuriuos naudosime šioje pamokoje: „Šrifto nuostabūs“ stilius ir styles.cssfailą, kuriame apibrėžsime šio puslapio stilius.

Tada yra likęs HTML failo turinys:

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

Šį skyrių galima suskirstyti į 3 pagrindines dalis:

  • .dropdownDIV, kur išskleidžiamojo elemento struktūra bus apibrėžti.
  • #resultElementas, kad bus pateikta pasirinktą parinktį naudotojas, išskleidžiamajame elementas.
  • Į žymą įrašytas scenarijus . Jo įgyvendinimas čia paslėptas, nes jo detalės bus paaiškintos paskutiniame šios pamokos skyriuje.

Išskleidžiamasis elementas yra diva titleir menuelementai. Pirmieji tik apibrėžia, koks tekstas bus pateiktas elemente, prieš pasirenkant bet kurią parinktį, o antrasis - parinktis, kurias elementas galės pasirinkti.

resultElementas yra ten tiesiog parodyti, ką variantas pasirinktas.

Stiliai:

Žemiau galite patikrinti visą css kodą. Kaip matote, jis naudoja CSS3 transitionir transformkonstrukcijas.

Atkreipkite dėmesį į .dropdownklasių apibrėžimus. Jie naudojami apibrėžiant išskleidžiamojo konteinerio komponento išdėstymą, taip pat jo vidinius elementus, tokius kaip .titleir .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“:

Dabar pamatysime, kaip įdiegta „Javascript“ dalis. Pirmiausia pereisime funkcijų apibrėžimus ir tada kodą, kuris iškviečia šias funkcijas, kad įvyktų išskleidžiamieji veiksmai.

Iš esmės yra 3 veiksmai, kurie atliekami atsižvelgiant į tai, kokia yra vartotojo sąveika, nes jų klausytojai pridedami prie DOM elementų:

  1. Spustelėkite išskleidžiamąjį elementą
  2. Pasirinkite vieną iš išskleidžiamųjų parinkčių
  3. Šiuo metu pasirinktos parinkties keitimas

Norėčiau aiškiai pasakyti, kad mes naudojame rodyklių funkcijas ( () => {}) ir constraktinį žodį, kurie yra ES6 funkcijos. Jums tikriausiai sekasi, jei naudojate naujausią naršyklės versiją, tačiau turėkite tai omenyje.

1. Spustelėkite išskleidžiamąjį 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'); }

Spustelėjus išskleidžiamąjį elementą, jis atsidaro (jei jis uždarytas) arba užsidaro (jei atidaromas). Tai atsitinka susiejant toggleMenuDisplaysu paspaudimo įvykių klausytoju išskleidžiamajame elemente. Ši funkcija perjungia jos ekranas menuelemento iki naudojimo toggleDisplayir toggleClassfunkcijų.

2. Pasirinkite vieną iš išskleidžiamųjų parinkčių

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. Šiuo metu pasirinktos parinkties keitimas

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

Funkcija handleTitleChangeyra susieta su pasirinktu elemento changeįvykiu .title, norint pakeisti #resultelemento turinį, kai keičiasi pavadinimo elementas. Šis įvykis suaktyvinamas ankstesniame skyriuje.

Pagrindinis kodas

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

Pagrindiniame skyriuje yra tik paprastas kodas, kad gautumėte išskleidžiamojo meniu pavadinimą ir parinkčių elementus, susiejančius juos su paskutiniame skyriuje aptartais įvykiais.

Demonstracija

Visą šios programos kodą ir demonstracinę versiją galite rasti čia.

Daugiau informacijos

  • ES6 įvadas
  • Rodyklės funkcijos
  • Let ir Const