Πώς να δημιουργήσετε ένα αναπτυσσόμενο μενού με CSS και JavaScript

Σε αυτό το σεμινάριο θα μάθετε πώς να δημιουργείτε ένα απλό αναπτυσσόμενο μενού με βανίλια Javascript, HTML και CSS. Θα ακολουθήσουμε τον κώδικα HTML, CSS και Javascript, αλλά δίνοντας μεγαλύτερη προσοχή στον προγραμματισμό, καθώς πρόκειται για ένα μάθημα JS. Θα χρησιμοποιήσουμε απλά JS και CSS, χωρίς πλαίσια ή προεπεξεργαστές. Η μόνη (είδος) εξαίρεση θα είναι η εισαγωγή του αρχείου Font Awesome CSS επειδή θα χρησιμοποιήσουμε ένα από τα εικονίδια του.

Αυτό απευθύνεται σε προγραμματιστές που έχουν κατά μέσο όρο κατανόηση HTML, CSS και JS. Προσπάθησα να το κάνω όσο το δυνατόν πιο καθαρό, αλλά δεν θα επικεντρωθώ πάρα πολύ στις λεπτομέρειες εδώ. Ελπίζω να απολαύσετε όλοι.

Στιγμιότυπα οθόνης

Έτσι φαίνεται το αποτέλεσμα του κώδικα:

Αρχική οθόνη:

Το αναπτυσσόμενο μενού άνοιξε:

Αναπτυσσόμενο μενού με επιλεγμένη επιλογή:

HTML:

Σε αυτήν την ενότητα, θα συζητήσουμε την εφαρμογή του κώδικα HTML για τη σελίδα επίδειξης. Για να ξεκινήσετε, ας δούμε τον κωδικό

      Dropdown Example   

Πρόκειται βασικά για κεφαλή HTML head, με εξαίρεση τις linkετικέτες που φορτώνουν τα δύο φύλλα στυλ CSS που θα χρησιμοποιήσουμε σε αυτό το σεμινάριο: τα στυλ της γραμματοσειράς και το styles.cssαρχείο, όπου θα καθορίσουμε τα στυλ αυτής της σελίδας.

Στη συνέχεια, υπάρχει το υπόλοιπο αρχείο HTML, το κύριο σώμα:

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

Αυτή η ενότητα μπορεί να χωριστεί σε 3 κύρια μέρη:

  • Το .dropdowndiv, όπου θα καθοριστεί η δομή του αναπτυσσόμενου στοιχείου.
  • Το #resultστοιχείο, που θα περιέχει την επιλεγμένη επιλογή από τον χρήστη, από το αναπτυσσόμενο στοιχείο.
  • Το σενάριο γραμμένο στην ετικέτα. Η εφαρμογή του κρύβεται εδώ, επειδή οι λεπτομέρειες του θα εξηγηθούν στην τελευταία ενότητα αυτού του σεμιναρίου.

Το αναπτυσσόμενο στοιχείο είναι ένα στοιχείο που divπεριέχει 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);

Στην κύρια ενότητα υπάρχει μόνο ένας απλός κώδικας για να λάβετε τον τίτλο και τα στοιχεία επιλογών για να συνδέσετε με αυτά τα συμβάντα που συζητήθηκαν στην τελευταία ενότητα.

Διαδήλωση

Μπορείτε να βρείτε τον πλήρη κώδικα και την επίδειξη αυτής της εφαρμογής εδώ.

Περισσότερες πληροφορίες

  • Εισαγωγή ES6
  • Λειτουργίες βέλους
  • Αφήστε και Const