So erstellen Sie ein Dropdown-Menü mit CSS und JavaScript

In diesem Tutorial erfahren Sie, wie Sie ein einfaches Dropdown-Menü mit Vanille-Javascript, HTML und CSS erstellen. Wir werden den HTML-, CSS- und Javascript-Code durchgehen, aber der Programmierung mehr Aufmerksamkeit schenken, da dies ein JS-Tutorial ist. Wir verwenden nur einfaches JS und CSS ohne Frameworks oder Präprozessoren. Die einzige Ausnahme ist der Import der CSS-Datei "Font Awesome", da eines der Symbole verwendet wird.

Dies richtet sich an Entwickler mit einem durchschnittlichen Verständnis von HTML, CSS und JS. Ich habe versucht, es so sauber wie möglich zu machen, aber ich werde mich hier nicht zu sehr auf Details konzentrieren. Ich hoffe es gefällt euch allen.

Screenshots

So sieht das Code-Ergebnis aus:

Einstiegsbild:

Dropdown geöffnet:

Dropdown mit ausgewählter Option:

HTML:

In diesem Abschnitt werden wir die Implementierung des HTML-Codes für die Demoseite diskutieren. Schauen wir uns zunächst den Code an

      Dropdown Example   

Dies ist im Grunde genommen ein HTML-Kopf-Boilerplate, mit Ausnahme der linkTags, die die beiden CSS-Stylesheets laden, die wir in diesem Tutorial verwenden werden: die Font Awesome-Stile und die styles.cssDatei, in der wir die Stile dieser Seite definieren.

Dann gibt es den Rest der HTML-Datei, den Body:

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

Dieser Abschnitt kann in 3 Hauptteile unterteilt werden:

  • Das .dropdowndiv, in dem die Struktur des Dropdown-Elements definiert wird.
  • Das #resultElement, das die vom Benutzer ausgewählte Option aus dem Dropdown-Element enthält.
  • Das in das Tag geschriebene Skript . Die Implementierung ist hier versteckt, da die Details im letzten Abschnitt dieses Tutorials erläutert werden.

Das Dropdown-Element diventhält a titleund menuElemente. Ersteres definiert lediglich, welcher Text auf dem Element angezeigt wird, bevor eine Option ausgewählt wird, und letzteres definiert die Optionen, die vom Element ausgewählt werden können.

Das resultElement dient nur dazu, Ihnen zu zeigen, welche Option aktuell ausgewählt ist.

Stile:

Unten können Sie den vollständigen CSS-Code überprüfen. Wie Sie sehen können, werden CSS3 transitionund transformKonstrukte verwendet.

Bitte beachten Sie die .dropdownKlassendefinitionen. Diese werden verwendet, um das Layout für die Dropdown-Containerkomponente sowie ihre inneren Elemente wie das .titleund sein .optionzu definieren.

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:

Jetzt werden wir sehen, wie der Javascript-Teil implementiert wird. Wir werden zuerst die Funktionsdefinitionen und dann den Code durchgehen, der diese Funktionen aufruft, um die Dropdown-Aktionen auszuführen.

Grundsätzlich gibt es drei Aktionen, die abhängig von der Benutzerinteraktion ausgeführt werden, wenn ihre Listener zu den DOM-Elementen hinzugefügt werden:

  1. Klicken Sie auf das Dropdown-Element
  2. Auswahl einer der Dropdown-Optionen
  3. Ändern der aktuell ausgewählten Option

Ich möchte klarstellen, dass wir die Pfeilfunktionen ( () => {}) und das constSchlüsselwort verwenden, die ES6-Funktionen sind. Sie sind wahrscheinlich gut, wenn Sie eine aktuelle Version Ihres Browsers verwenden, aber denken Sie daran.

1. Klicken Sie auf das Dropdown-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'); }

Wenn Sie auf das Dropdown-Element klicken, wird es geöffnet (wenn es geschlossen ist) oder geschlossen (wenn es geöffnet ist). Dies geschieht durch Bindung toggleMenuDisplayan den Listener für Klickereignisse im Dropdown-Element. Diese Funktion schaltet die Anzeige ihres menuElements mithilfe der Funktionen toggleDisplayund um toggleClass.

2. Wählen Sie eine der Dropdown-Optionen

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. Ändern der aktuell ausgewählten Option

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

Die Funktion handleTitleChangeist an das benutzerdefinierte changeEreignis des .titleElements gebunden, um den Elementinhalt zu ändern, #resultwenn sich das Titelelement ändert. Die Auslösung dieses Ereignisses erfolgt im vorherigen Abschnitt.

Haupt code

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

Im Hauptabschnitt gibt es nur einen einfachen Code, um die Titel- und Optionselemente der Dropdown-Liste abzurufen und die im letzten Abschnitt beschriebenen Ereignisse an sie zu binden.

Demo

Den vollständigen Code und die Demo dieser Anwendung finden Sie hier.

More Information

  • ES6 introduction
  • Arrow functions
  • Let and Const