Πώς να φτιάξετε μια γραμμή μενού για κινητά με HTML, CSS και JavaScript

Αναμφίβολα, μπορείτε να δημιουργήσετε ένα εναλλασσόμενο μενού για κινητά χρησιμοποιώντας πλαίσια CSS όπως το TailWind ή το BootStrap.

Ποια είναι όμως η ιδέα πίσω από αυτό; Και πώς μπορείτε να φτιάξετε ένα από την αρχή χωρίς να εξαρτάστε από αυτά τα πλαίσια CSS;

Κάνοντας τα παραπάνω μόνοι σας, έχετε τον πλήρη έλεγχο προσαρμογής. Επομένως, χωρίς περαιτέρω αναμονή, δείτε πώς μπορείτε να δημιουργήσετε ένα εναλλασσόμενο μενού για κινητά χρησιμοποιώντας τη γλώσσα προγραμματισμού που προτιμάτε.

Πώς να δημιουργήσετε το Togglable Mobile Menu σας

Εάν δεν το έχετε κάνει ήδη, ανοίξτε το φάκελο του έργου σας και δημιουργήστε τα αρχεία του έργου σας (HTML, CSS και JavaScript).

Παρακάτω, θα δείτε παραδείγματα του κώδικα που χρειάζεστε και για τους τρεις τύπους. Και αν δεν το έχετε κάνει ήδη, σκεφτείτε να το κατεβάσετε αυτές οι εφαρμογές για να μάθουν κώδικα πριν διαβάσετε.

Θα ξεκινήσουμε με HTML:

 Δημιουργήστε τρία divs για να αντιπροσωπεύσετε την αναπτυσσόμενη γραμμή μενού τριών γραμμών 








 Προσθέστε τις πλοηγήσεις σας εδώ 


Σπίτι
Σχετικά με
Επικοινωνία

CSS:

/*Η οριοθέτηση αυτής της ενότητας γίνεται αποκλειστικά για τους σκοπούς του σεμιναρίου*/
Ενότητα{ 
πλάτος: 800px;
ύψος: 600px;
margin-top: 50px;
margin-left: 250px;
περίγραμμα: συμπαγές μαύρο 1px.
φόντο: #e6e3dc;
}
/*τοποθετήστε το κοντέινερ divs στο DOM σας*/
#toggle-container {
οθόνη: πλέγμα
πλάτος: fit-content?
περιθώριο-αριστερά: 720px;
margin-top: 10px;
}
/*Τοποθετήστε τα τρία div το ένα πάνω στο άλλο. Στη συνέχεια, ορίστε ύψος και πλάτος γι 'αυτούς.*/
#ένα δύο τρία{
φόντο: μαύρο
πλάτος: 30px;
ύψος: 3px;
margin-top: 5px;
} 
.toggle-content {
οθόνη: καμία?
margin-left: 700px;
margin-top: 20px;
}
.toggle-content a {
οθόνη: μπλοκ?
κείμενο-διακόσμηση: κανένα?
χρωμα μαυρο;
γραμματοσειρά: 30px;
}
.toggle-content a: hover {
χρώμα: μπλε?
}
/*Εμφάνιση της παρουσίας κλάσης που δημιουργήθηκε από JavaScript στο μπλοκ*/
.εκτεθειμένος{
οθόνη: μπλοκ?
}

Προσθήκη JavaScript:

var toggler = document.getElementById ("εναλλαγή-κοντέινερ");
var toggleContents = document.getElementById ("εναλλαγή περιεχομένου");
document.addEventListener ("κλικ", λειτουργία () {
// Εφαρμόστε μια τάξη σε κάθε πλοήγηση και ορίστε την οθόνη για εναλλαγή:
toggleContents.classList.toggle ("εμφανίζεται");
});

Δείτε πώς φαίνεται μια έξοδος εργασίας όταν κάνετε κλικ στη γραμμή μενού:

Το μενού είναι εναλλάξιμο, οπότε κάνοντας ξανά κλικ στη γραμμή - ή οπουδήποτε μέσα στη σελίδα - αποκρύπτεται η πλοήγηση.

Σχετίζεται με: Στοιχεία στυλ ιστότοπου με κλίση φόντου CSS

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

// Προσθέστε ένα συμβάν κλικ στην ιστοσελίδα σας:
window.onclick = λειτουργία (συμβάν) {
// Στοχεύστε το συμβάν κλικ στη γραμμή μενού για να επιτρέψετε στο σώμα της ιστοσελίδας να το παρακολουθεί:
if (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("εναλλαγή περιεχομένου");
// Απόκρυψη των πλοήγησης κάνοντας βρόχο σε καθένα από αυτά:
για (var i = 0; i var drop = dropdowns [i];
if (drops.classList.contains ('display')) {
drops.classList.remove ('display');
}
}
}
}

Ορίστε λοιπόν μια περίληψη του τι μόλις κάνατε: Δημιουργήσατε τρεις γραμμές χρησιμοποιώντας το div ετικέτα HTML. Προσαρμόσατε το ύψος και το πλάτος τους και τα τοποθετήσατε στο DOM σας. Στη συνέχεια, δώσατε σε αυτά ένα συμβάν κλικ χρησιμοποιώντας JavaScript.

Σχετίζεται με: Πώς να φτιάξετε έναν ιστότοπο: Για αρχάριους

Ορίσατε την αρχική εμφάνιση των πλοηγήσεών σας σε κανένας για να τα αποκρύψετε όταν φορτώνει η σελίδα. Μετά το Κάντε κλικ συμβάν στις τρεις γραμμές αλλάζει αυτές τις περιηγήσεις με βάση μια κλάση με JavaScriptεκτεθειμένος). Τέλος, χρησιμοποιήσατε αυτήν τη νέα τάξη για να εμφανίσετε τις πλοηγήσεις χρησιμοποιώντας CSS και JavaScript εναλλαγή περιεχομένων μέθοδος.

Σχετίζεται με: Νέουμορφες τάσεις σχεδίασης σε HTML, CSS και JavaScript

Το υπόλοιπο CSS, ωστόσο, εξαρτάται από τις προτιμήσεις σας. Αλλά αυτό στο παράδειγμα αποσπάσματος CSS εδώ θα πρέπει να σας δώσει μια ιδέα για το πώς να διαμορφώσετε το δικό σας.

Γίνετε πιο δημιουργικοί όταν δημιουργείτε τον ιστότοπό σας

Η δημιουργία ενός οπτικά ελκυστικού ιστότοπου απαιτεί κάποια δημιουργικότητα. Και ένας φιλικός προς τον χρήστη ιστότοπος είναι πιο πιθανό να μετατρέψει το κοινό σας παρά έναν ήπιο.

Παρόλο που σας δείξαμε πώς να δημιουργήσετε ένα προσαρμοσμένο μενού πλοήγησης εδώ, μπορείτε ακόμα να προχωρήσετε πέρα ​​από αυτό και να το κάνετε πιο συναρπαστικό. Για παράδειγμα, μπορείτε να ζωντανεύσετε την οθόνη των πλοηγήσεων, να τους δώσετε χρώμα φόντου και πολλά άλλα. Και ό, τι κι αν κάνετε, βεβαιωθείτε ότι ο ιστότοπός σας χρησιμοποιεί τις βέλτιστες πρακτικές σχεδίασης και διατάξεις που είναι εύχρηστες για τους χρήστες.

Πώς να χρησιμοποιήσετε ξανά το παλιό σας υλικό σαν επαγγελματίας

Έχετε πολλά παλιά τεχνολογικά ακατάστατα στο σπίτι σας; Μάθετε τι ακριβώς να κάνετε με αυτό σε αυτόν τον οδηγό ανακύκλωσης τεχνολογίας!

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα