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

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

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





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



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





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

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

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



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




Mobile Navigation Menu











Home
About
Contact



CSS:



/*This section demarcation is solely for the purpose of the tutorial*/
section{
width: 800px;
height: 600px;
margin-top: 50px;
margin-left: 250px;
border: solid black 1px;
background: #e6e3dc;
}
/*position the divs container in your DOM*/
#toggle-container{
display: grid;
width: fit-content;
margin-left: 720px;
margin-top: 10px;
}
/*Stack the three divs above each other. Then set a height and width for them.*/
#one, #two, #three{
background: black;
width: 30px;
height: 3px;
margin-top: 5px;
}
.toggle-content{
display: none;
margin-left: 700px;
margin-top: 20px;
}
.toggle-content a{
display: block;
text-decoration: none;
color: black;
font-size: 30px;
}
.toggle-content a:hover{
color: blue;
}
/*Display the class instance created by JavaScript in block*/
.displayed{
display: block;
}

Προσθήκη JavaScript:

πώς να βγάλετε τη σπασμένη υποδοχή ακουστικών
var toggler = document.getElementById('toggle-container');
var toggleContents = document.getElementById('toggle-content');
document.addEventListener('click', function(){
//Apply a class intance to each navigation and set display to toggle:
toggleContents.classList.toggle('displayed');
});

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



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

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

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

//Add a click event to your webpage:
window.onclick = function(event) {
//Target the click event on the menu bar to allow the webpage body to track it:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName('toggle-content');
//Hide the navigations by looping through each of them:
for (var i = 0; i var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}

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

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

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

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

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

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

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

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

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ 15 Εντολές γραμμής εντολών των Windows (CMD) που πρέπει να γνωρίζετε

Η γραμμή εντολών εξακολουθεί να είναι ένα ισχυρό εργαλείο Windows. Ακολουθούν οι πιο χρήσιμες εντολές CMD που πρέπει να γνωρίζει κάθε χρήστης των Windows.

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγραμματισμός
  • HTML
  • CSS
  • JavaScript
  • Συμβουλές κωδικοποίησης
Σχετικά με τον Συγγραφέα Ηδίσου Ομισόλα(Δημοσιεύθηκαν 94 άρθρα)

Η Idowu είναι παθιασμένη με οτιδήποτε έξυπνη τεχνολογία και παραγωγικότητα. Στον ελεύθερο χρόνο του, παίζει με κωδικοποίηση και μεταβαίνει στη σκακιέρα όταν βαριέται, αλλά του αρέσει επίσης να ξεφεύγει από τη ρουτίνα κάθε τόσο. Το πάθος του για να δείξει στους ανθρώπους τον δρόμο γύρω από τη σύγχρονη τεχνολογία τον παρακινεί να γράψει περισσότερα.

Περισσότερα από το Idowu Omisola

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή