Как да създадете падащо меню с CSS и JavaScript

В този урок ще научите как да създадете просто падащо меню с ванилов Javascript, HTML и CSS. Ще разгледаме HTML, CSS и Javascript кода, но ще обърнем повече внимание на програмирането, тъй като това е JS урок. Ще използваме обикновени JS и CSS, без рамки или препроцесори. Единственото (вид) изключение ще бъде импортирането на CSS файла Font Awesome, защото ще използваме една от неговите икони.

Това е насочено към разработчици, които имат средно разбиране за HTML, CSS и JS. Опитах се да го направя възможно най-изчистен, но тук няма да се съсредоточавам много върху детайлите. Надявам се, че всички ще се насладите.

Снимки на екрана

Ето как изглежда резултатът от кода:

Начален екран:

Отворено падащо меню:

Падащо меню с избрана опция:

HTML:

В този раздел ще обсъдим прилагането на HTML кода за демонстрационната страница. За да започнем, нека видим кода

      Dropdown Example   

Това е основно HTML шаблон, с изключение на linkмаркерите, зареждащи двете CSS таблици със стилове, които ще използваме в този урок: Стиловете Font Awesome и styles.cssфайла, където ще дефинираме стиловете на тази страница.

След това има останалата част от HTML файла, тялото:

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

Този раздел може да бъде разделен на 3 основни части:

  • Най- .dropdownDIV, където ще бъде определена структура падащия елемента.
  • Най- #resultелемент, който ще съдържа избраната опция от страна на потребителя, от падащото меню елемент.
  • Сценарият, записан в маркера. Изпълнението му е скрито тук, защото подробностите за него ще бъдат обяснени в последния раздел на този урок.

Падащият елемент е divсъдържащ a titleи menuелементи. Първият само дефинира какъв текст ще бъде представен върху елемента, преди да бъде избрана която и да е опция, а вторият ще определи опциите, които ще бъдат избираеми от елемента.

Най resultелемент е там само за да ви покажа какво е текущо избрания вариант.

Стилове:

По-долу можете да проверите пълния css код. Както можете да видите, той използва CSS3 transitionи transformконструкции.

Моля, обърнете внимание на .dropdownопределенията на класовете. Те се използват за определяне на оформлението на компонента на падащия контейнер, както и неговите вътрешни елементи, като например .titleи неговите .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:

Сега ще видим как се изпълнява частта на Javascript. Първо ще преминем през дефинициите на функциите и след това кода, който извиква тези функции, за да се случат падащите действия.

По принцип има 3 действия, които се извършват в зависимост от това какво е взаимодействието на потребителя, тъй като техните слушатели се добавят към DOM елементите:

  1. Кликване върху падащия елемент
  2. Избиране на една от опциите за падащо меню
  3. Промяна на избраната в момента опция

Бих искал да поясня, че използваме стрелкови функции ( () => {}) и constключовата дума, които са ES6 функции. Вероятно сте добре, ако използвате скорошна версия на браузъра си, но имайте това предвид.

1. Кликване върху падащия елемент

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

Когато щракнете върху падащия елемент, той се отваря (ако е затворен) или се затваря (ако е отворен). Това се случва чрез свързване toggleMenuDisplayкъм слушателя на събитията за щракване върху падащия елемент. Тази функция превключва на дисплея на своя menuелемент от употребата на toggleDisplayи toggleClassфункции.

2. Избиране на една от падащите опции

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. Промяна на избраната в момента опция

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

Функцията handleTitleChangeе обвързана с персонализираното changeсъбитие на .titleелемента, за да променя #resultсъдържанието на елемента, когато елементът на заглавието се промени. Задействането на това събитие се извършва в предишния раздел.

Основен код

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

В основния раздел има само един прост код, за да получите заглавието на падащото меню и елементите с опции, които да обвържат към тях събитията, обсъдени в последния раздел.

Демонстрация

Пълният код и демо на това приложение можете да намерите тук.

More Information

  • ES6 introduction
  • Arrow functions
  • Let and Const