Το μενού χάμπουργκερ είναι ένα απλό μενού. Εικονίδιο χάμπουργκερ: νέοι τρόποι χρήσης του. Εφαρμογή σε tablet

Από τον Vitaly Rubtsov, δεν μπορούσα να αντισταθώ στην επιθυμία να το συνειδητοποιήσω.

Σε αυτό το σεμινάριο, θα σας δείξω πώς να το κάνετε αυτό χρησιμοποιώντας μόνο CSS, χωρίς καμία χρήση JavaScript. Έτσι, θα δούμε μερικά κόλπα CSS (και SCSS) που θα μας επιτρέψουν να επιτύχουμε κινούμενα σχέδια σχεδόν τόσο ομαλά όσο αυτό το κινούμενο gif.

Ακολουθεί ένα παράδειγμα αυτού που θα κάνουμε:

Βαθμολόγηση

Ας ξεκινήσουμε με τη δομή HTML που θα χρησιμοποιήσουμε. Δείτε τα σχόλια για καλύτερη κατανόηση.

Ελεγχος ΙστορίαΣτατιστική Ρυθμίσεις

Εκκίνηση στυλ SCSS

Τώρα ας προσθέσουμε κάποιο βασικό στυλ για να έχουμε την εμφάνιση που θέλουμε. Ο κώδικας είναι αρκετά απλός.

/* Βασικά στυλ */ * ( μέγεθος πλαισίου: border-box; ) html, σώμα ( περιθώριο: 0; ) σώμα ( γραμματοσειρά-οικογένεια: sans-serif; χρώμα φόντου: #F6C390; ) a ( διακόσμηση κειμένου: κανένα;

Λειτουργία διακόπτη

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

Το HTML που χρειαζόμαστε είναι ήδη εκεί. Και το στυλ που το κάνει να λειτουργεί είναι κάπως έτσι:

// Απόκρυψη του πλαισίου ελέγχου #toggle ( εμφάνιση: κανένα; ) // Στυλ για την κατάσταση "ανοιχτό" όταν είναι επιλεγμένο το πλαίσιο ελέγχου #toggle:checked ( // Κάθε στοιχείο του οποίου το στυλ πρέπει να αλλάξετε κατά το άνοιγμα του μενού πηγαίνει εδώ με ένα επιλογέας ~ // Στυλ για το άνοιγμα ενός μενού πλοήγησης, για παράδειγμα & ~ .nav ( ) )

Δημιουργία κλειστής κατάστασης

Για να κάνουμε την κλειστή κατάσταση, πρέπει να μετατρέψουμε τα στοιχεία του μενού σε γραμμές για να λάβουμε ένα εικονίδιο χάμπουργκερ. Υπάρχουν διάφοροι τρόποι για να επιτευχθεί αυτός ο μετασχηματισμός. Αποφασίσαμε να το κάνουμε με αυτόν τον τρόπο:

Και εδώ είναι ο κώδικας που το υλοποιεί.

$transition-duration: 0,5s; // Εμφάνιση στοιχείων πλοήγησης ως γραμμές που συνθέτουν το εικονίδιο χάμπουργκερ.nav-item ( θέση: σχετική; εμφάνιση: ενσωματωμένο μπλοκ; αιώρηση: αριστερά; καθαρό: και τα δύο; χρώμα: διαφανές; μέγεθος γραμματοσειράς: 14 εικονοστοιχεία; διάστιχο: - 6.2px ύψος: 7px: nowrap scaleY(0.2) πλάτος για τη δεύτερη γραμμή &:nth-child(2) ( διάστιχο: -7px; ) // Ρυθμίσεις για στοιχεία που ξεκινούν από την τέταρτη & :nth-child(n + 4) ( διάστιχο: -8px; περιθώριο -πάνω μέρος: -7 px; : translateY(5);

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

Δημιουργήστε ένα ανοιχτό μενού

Για να δημιουργήσουμε ένα ανοιχτό μενού, πρέπει να επαναφέρουμε τα στοιχεία πλοήγησης από γραμμές σε κανονικούς συνδέσμους κειμένου, καθώς και να κάνουμε ορισμένες μικρές αλλαγές. Ας δούμε πώς να το κάνουμε αυτό:

$transition-duration: 0,5s; #toggle:checked ( // Open & ~ .nav ( // Επαναφορά των στοιχείων πλοήγησης από τις "γραμμές" στο μενού icon.nav-item ( χρώμα: #EC7263; διάστιχο: 0; ύψος: 40 px; γραμμή- ύψος: 40 px ;

Η μαγεία είναι στα μικρά πράγματα

Αν ρίξουμε μια πιο προσεκτική ματιά στο gif, βλέπουμε ότι όλα τα στοιχεία του μενού δεν μετακινούνται ταυτόχρονα, αλλά με μοτίβο σκακιέρας. Μπορούμε να το κάνουμε αυτό και σε CSS! Βασικά, πρέπει να επιλέξουμε κάθε στοιχείο (χρησιμοποιώντας :nth-child ) και να ορίσουμε την τιμή μετάβασης-καθυστέρησης να αυξάνεται σταδιακά. Αυτή είναι σίγουρα επαναλαμβανόμενη δουλειά. Τι γίνεται αν έχουμε περισσότερα στοιχεία; Μην ανησυχείτε, μπορούμε να κάνουμε τα πάντα καλύτερα χρησιμοποιώντας λίγη μαγεία SCSS:

$items: 4; $transition-delay: 0,05s; .nav-item ( // Ορίστε την καθυστέρηση για τα στοιχεία πλοήγησης κατά το κλείσιμο του @for $i από 1 έως $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - καθυστέρηση μετάβασης: $καθυστέρηση &:πριν (transition-delay: $καθυστέρηση; ) )

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

$delay: ($items - $i) * $transition-delay;

συμπέρασμα

Τελειώσαμε με το φανταχτερό μας μενού! Έχουμε συμπεριλάβει επίσης μερικά εικονικά στοιχεία όπως στο κινούμενο gif και μπορείτε να δείτε.

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

Ελπίζουμε να σας άρεσε αυτό το σεμινάριο και να το βρήκατε χρήσιμο!

Γεια σε όλους. Ο Corvax είναι μαζί σας. Σήμερα θέλω να συνεχίσω το θέμα των μενού για κινητά και σας προσκαλώ να το κάνετε, αλλά μόνο χρησιμοποιώντας jQuery. Πηγαίνω.

Δημιουργία διάταξης μενού HTML Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis autem consequatur eum facere neque. Tenetur laboriosam repellendus neque fuga, velit, totam, est, aspernatur sunt sapiente earum quo beatae. Φούγκα, επίσημα. Προσθήκη βασικών στυλ CSS nav( background: #3e2597; padding: 0; margin: 0; ) .menu( list-style-type: none; padding: 0; margin: 0; ) .menu li(float: left; ) . μενού li a( οθόνη: inline-block; padding: 10px 15px; χρώμα: #fff; text-decoration: none;) .wrapper(max-width: 1024px; padding: 10px; margin: 0px auto;) .menuToggle( color : #fff; padding: 10px 15px; : απόλυτο πλάτος: 100% padding-left: 10px ) .menu li(float: none;

Αφού δημιουργήσουμε το ίδιο το μενού, πρέπει να συνδέσουμε το αρχείο JS και να πάμε στο διασκεδαστικό κομμάτι.

$(function())( $(".menuToggle").on("click", function() ( $(".menu").slideToggle(300, function())( if($(this).css (" display") === "κανένα") ($(this).removeAttr("style"); ) ));

Ας ρίξουμε μια πιο προσεκτική ματιά σε αυτά που γράφονται εδώ. Στην αρχή, κλείνουμε τις πληροφορίες κάνοντας κλικ στο ίδιο το κουμπί «Μενού». Μέσα σε αυτό το συμβάν, προσθέτουμε μια συνάρτηση slideToggle() στο αναπτυσσόμενο μενού $(“menu”), το οποίο θα ανοίξει και θα κλείσει ομαλά το αναπτυσσόμενο μενού.

Υπάρχει ένα μικρό πρόβλημα που θα έχουμε κατά την εναλλαγή εκδόσεων του ιστότοπου και κάνοντας κλικ στο κουμπί "Μενού", δηλαδή, το μπλοκ με τα ίδια τα στοιχεία μενού θα είναι κρυφό επειδή Από προεπιλογή, η συνάρτηση slideToggle() προσθέτει το χαρακτηριστικό "display: none" κατά το κλείσιμο. Για να διορθώσετε αυτό το σφάλμα, πρέπει να καλέσετε μια επανάκληση (μια συνάρτηση που θα κληθεί μετά την επεξεργασία της κύριας συνάρτησης) για τη συνάρτηση slideToggle(). Μέσα στην επανάκληση γράφουμε μια συνθήκη. Εάν έχουμε ένα χαρακτηριστικό στο μπλοκ μενού ίσο με το "display: none" τότε αφαιρούμε το χαρακτηριστικό "style".

συμπέρασμα

Έτσι, πολύ απλά και γρήγορα, δημιουργήσαμε ένα προσαρμοστικό μενού «χάμπουργκερ» που μπορείτε να χρησιμοποιήσετε εύκολα στα έργα σας. μπορείτε να κατεβάσετε τις πηγές. Ο Κόρβαξ ήταν μαζί σου. Ναι, νέες συναντήσεις!

Πιθανότατα έχετε ήδη βαρεθεί να διαβάζετε άρθρα και να ακούτε συνεχώς διάφορες συζητήσεις για τρεις σύντομες γραμμές του μενού του χάμπουργκερ. Είναι αυτή μια κακή τεχνική σχεδίασης διεπαφής χρήστη; Ή όχι κακό; Αυτή η ανάρτηση είναι διαφορετική - δεν θα κρίνει αν αυτό το μενού είναι καλό ή κακό. Το θέμα είναι ότι δεν νομίζω ότι είναι η καλύτερη σχεδιαστική απόφαση, με τον ένα ή τον άλλο τρόπο. Αλλά και το μενού χάμπουργκερ έχει τα δυνατά του σημεία, ειδικά όταν χρησιμοποιείται σε φορητή σχεδίαση, σε συνθήκες περιορισμένου χώρου. Λοιπόν, τι μπορούμε να κάνουμε? Απλώς αποδεχτείτε το μενού του χάμπουργκερ ως έχει, παρ' όλες τις ελλείψεις, και προχωρήστε στη ζωή σας; Πολλοί ιστότοποι και εφαρμογές φαίνεται να έχουν συμβιβαστεί με αυτό. Και πιστεύω ότι είμαι ικανός για το καλύτερο.

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

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

Εύρεση λύσης

Αυτό είναι αρκετό για τους λόγους για τους οποίους δυσπιστώ στη δύναμη του μενού του χάμπουργκερ - ήρθε η ώρα να μιλήσουμε για τη λύση. Αρχικά, εξέτασα τα συγκεκριμένα οφέλη από τη χρήση ενός μενού χάμπουργκερ:

Επεκτασιμότητα: Αυτό είναι ίσως το κύριο πλεονέκτημα και ο κύριος λόγος για τον οποίο το επιλέγουν τόσοι πολλοί ιστότοποι και εφαρμογές. Μπορείτε να χωρέσετε πολλά στοιχεία πλοήγησης πίσω από ένα μικρό εικονίδιο.
Ακρίβεια: αυτό συμβαδίζει με την επεκτασιμότητα, αλλά δεν είναι το ίδιο πράγμα. Οι σχεδιαστές θέλουν να δημιουργούν συνοπτικά και προσεγμένα σχέδια, αφήνοντας αρκετό χώρο για το κύριο περιεχόμενο. Η χρήση ενός μενού χάμπουργκερ δίνει μια αίσθηση οπτικής απλότητας που είναι ελκυστική για κάθε σχεδιαστή.

Και αν θέλουμε να δημιουργήσουμε μια εναλλακτική στο μενού του χάμπουργκερ, θα πρέπει να λύσει με κάποιο τρόπο τα προβλήματα που σχετίζονται με αυτό:

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

Το δύσκολο κομμάτι: κινητό

Αποφάσισα να ξεκινήσω με το πιο δύσκολο πρόβλημα και να δω αν η λύση μου θα λειτουργούσε για σχέδια για κινητά. Αφού σκέφτηκα έναν τόνο ιδεών, κατέληξα στο συμπέρασμα ότι το μενού της γραμμής καρτελών του iOS είναι μια από τις καλύτερες λύσεις για διεπαφές για φορητές συσκευές. Πολλοί άνθρωποι προσπάθησαν να κάνουν τη γραμμή καρτελών με δυνατότητα κύλισης (για να χωρέσουν περισσότερες από πέντε επιλογές) ή να προσθέσουν "περισσότερα" στην πλοήγηση - κάτι σαν τον Plyushkin, ο οποίος έχει ένα επιπλέον δωμάτιο που θα γεμίσει γρήγορα με σκουπίδια. Επίσης, και οι δύο αυτές επιλογές εξακολουθούν να μην πληρούν την κύρια απαίτηση - η σαφήνεια, η ορατότητα όλων των πιθανοτήτων λείπει. Τι μπορείτε λοιπόν να κάνετε με το μενού καρτελών για να το διορθώσετε;

Η λύση μου είναι να συνδυάσω το χάμπουργκερ και τη γραμμή καρτελών σε μια ενιαία προσέγγιση. Το αποτέλεσμα είναι μια γραμμή καρτελών που ανοίγει ένα σύνολο επιλογών για κάθε στοιχείο μενού.

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

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

Φυσικά, η μεγαλύτερη νίκη αυτής της προσέγγισης είναι η επεκτασιμότητα. Ναι, εξακολουθείτε να περιορίζεστε σε πέντε κατηγορίες, αλλά αυτό είναι καλό. Ειλικρινά, νομίζω ότι οποιοσδήποτε ιστότοπος μπορεί να χωρέσει τις επιλογές του σε πέντε κατηγορίες, εάν ο σχεδιαστής σκεφτεί τη πλοήγηση με σύνεση. Άλλωστε, σε καθεμία από αυτές τις κατηγορίες μπορεί να υπάρχουν πέντε ή έξι ακόμη υποστοιχεία.
Συνολικά, υπάρχουν 30 πιθανές επιλογές πλοήγησης χωρίς την αίσθηση υπερφόρτωσης για τον χρήστη και χωρίς να καταλαμβάνεται ολόκληρος ο χώρος της οθόνης.

Εφαρμογή σε tablet

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

Τι γίνεται με την επιφάνεια εργασίας;

Ετοιμαστείτε... ανασυρόμενο μενού. Αυτό είναι σωστό - δοκιμάστε αυτήν την προσέγγιση σε μια επιφάνεια εργασίας και θα βρεθείτε αντιμέτωποι με μια αναμφισβήτητη πραγματικότητα: αυτή η επιλογή δεν είναι καθόλου νέα. Τα συρόμενα μενού υπάρχουν εδώ και χρόνια και σχεδόν οποιοσδήποτε (ακόμη και η μαμά σας) ξέρει πώς λειτουργεί. Αυτή είναι η ομορφιά αυτής της προσέγγισης - δεν είναι κάτι καινούργιο.

Πλήρης αποκάλυψη

Δεν ξέρω πώς να το ονομάσω αυτό το πράγμα. Ρυθμιστικό ένθετου; Ή TABurger (TAB “tab” + burger); Επιπλέον, δεν ξέρω αν κάποιος έχει δημιουργήσει παρόμοια λύση στο παρελθόν. Δεδομένης της απλότητας ενός τέτοιου μενού, δεν αντέχω να πιστεύω ότι ήμουν ο πρώτος. Γνωρίζω ότι μερικές εφαρμογές χρησιμοποιούν συρόμενα μενού σε ορισμένα κουμπιά καρτελών (όπως το Tweetbot), αλλά συνήθως έχουν σχεδιαστεί ως γρήγορη πρόσβαση σε λειτουργίες για ισχυρούς χρήστες, όχι ως τρόπο δημιουργίας μιας ιεραρχίας πλοήγησης. Εάν έχετε ένα τέτοιο παράδειγμα, ενημερώστε με στα σχόλια.
Δεν έχει σημασία αν ένα τέτοιο μενού είναι νέο ή έχει εφευρεθεί από καιρό. Αυτό που έχει σημασία είναι αν είναι μια καλύτερη, πιο δημιουργική λύση πλοήγησης από ένα μενού χάμπουργκερ. Σταματήστε να λέτε στον εαυτό σας «Αυτός ο υπέροχος ιστότοπος έχει αυτό το μενού, άρα πρέπει να είναι το καλύτερο» ή «Όλοι το κάνουν, άρα πρέπει να είναι σωστό». Ο σχεδιασμός αξίζει μια καλύτερη, πιο προσεκτική προσέγγιση.
ΕΝΗΜΕΡΩΣΕΙΣ
Ο Collin Eberhardt σημείωσε στο Twitter ότι το ίδιο UI εφαρμόζεται και στο Windows Phone. Είμαι ο ίδιος χρήστης Windows Phone και έχει δίκιο. Αν και αυτός ο τύπος αλληλεπίδρασης χρησιμοποιείται στο Windows Phone μόνο για την επιλογή "περισσότερα" στη γραμμή καρτελών.

Ο Τζέιμς Πέριτς έδωσε ένα άλλο παράδειγμα στο Twitter. Ρίξτε μια ματιά στο AHTabBarController που δημιουργήθηκε από τον Arthur Hemmer.

Μέχρι στιγμής έχουμε κάνει μόνο τη διάταξη.

5. Κάντε λήψη της βιβλιοθήκης jquery-3.3.1.min.js

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

6. Δημιουργήστε ένα συμβάν στο JS

Γράφουμε τον παρακάτω κώδικα στο αρχείο script.js

$(συνάρτηση())(
$(".menuBurger").on("κλικ", λειτουργία())(
$(".menu").slideToggle(200, function())(
if($(this).css("display") === "none")(
$(this).removeAttr("style");
}
});
});
});

Δεν θα αναλύσουμε λεπτομερώς τον κώδικα JS, θα περιοριστούμε σε γενικά σχόλια. Μπορώ να το προτείνω σε όσους ενδιαφέρονται για προγραμματισμό σε JS

Αυτή η γραμμή $(".menuBurger").on("click", function())( παρακολουθεί το συμβάν κλικ σε ένα στοιχείο με κλάση .menuBurger .

$(".menu").slideToggle(200, function())( εδώ η συνάρτηση slideToggle() εφαρμόζεται στο ίδιο το μενού, το οποίο εναλλάξ επεκτείνει ή συμπτύσσει τα επιλεγμένα στοιχεία στη σελίδα σε 200 χιλιοστά του δευτερολέπτου.

$(this).removeAttr("style"); - αφαιρεί την οθόνη: κανένα από τα ενσωματωμένα στυλ.

Τώρα, όταν κάνετε κλικ στο χάμπουργκερ, το μενού επεκτείνεται και συμπτύσσεται, αλλά υπάρχει ένα πρόβλημα: όταν επεκτείνεται, το μενού μετακινεί το κύριο περιεχόμενο του ιστότοπου προς τα κάτω, αλλά είναι σωστό εάν βρίσκεται πάνω από το περιεχόμενο. Ταυτόχρονα, η ταχύτητα φόρτωσης της σελίδας υποφέρει, ειδικά στο Διαδίκτυο για κινητά.

6. Επέκταση του μενού πάνω από το περιεχόμενο

Αυτό το πρόβλημα επιλύεται χρησιμοποιώντας την τοποθέτηση μενού.

Στον κύριο κώδικα CSS που πρέπει να προσθέσετε

Μενού (
θέση: σχετική;
}

Σε ερώτημα πολυμέσων: .menu (
φόντο: #eee;
θέση: απόλυτη;
}

Μετά από αυτό, το μενού χάμπουργκερ θα επεκταθεί πάνω από το κύριο περιεχόμενο. Έτσι πρέπει να είναι.

Μενού χάμπουργκερ σε CSS

1. Απενεργοποιήστε και διαγράψτε όλα τα σενάρια

2. Εισαγάγετε μια γραμμή κώδικα στο αρχείο HTML μεταξύ των ετικετών div και ul

3. Αντικαταστήστε την ετικέτα div με την κλάση .menuBurger με ετικέτα

4. Συνδέστε την είσοδο αναγνωριστικού στο χαρακτηριστικό for label μέσω #menuCSS

Ως αποτέλεσμα, όταν κάνετε κλικ στο εικονίδιο του μενού χάμπουργκερ, εμφανίζεται ένα σημάδι επιλογής στο πλαίσιο ελέγχου.

5. Προσθέστε την επιλεγμένη ψευδοκλάση στο ερώτημα πολυμέσων

#menuCSS:checked (
οθόνη: καμία;
}

Αυτό σημαίνει ότι όταν κάνετε κλικ στο εικονίδιο, τοποθετείται ένα τικ στο πλαίσιο ελέγχου, αλλά είναι κρυμμένο στην οθόνη, μόνο το εικονίδιο είναι ορατό. Η ιδέα είναι ότι εάν το πλαίσιο ελέγχου δεν είναι επιλεγμένο, τότε το μενού είναι κλειστό και εάν είναι επιλεγμένο, τότε το μενού επεκτείνεται. Το συμβάν με το άνοιγμα και το κλείσιμο του μενού εξαρτάται από την κατάσταση του πλαισίου ελέγχου.

6. Απόκρυψη εισόδου στο CSS

#menuCSS (
οθόνη: καμία;
}

7. Αλλάξτε τον κωδικό στο σημείο 5, δείτε παραπάνω στο άρθρο για τα ακόλουθα

#menuCSS:checked + .menu (
οθόνη: μπλοκ;
}

Εάν είναι επιλεγμένη η σύνδεση μεταξύ ετικέτας και εισόδου #menuCSS, τότε το μενού επεκτείνεται. Αυτή είναι όλη η μαγεία, το μενού χάμπουργκερ λειτουργεί σε καθαρό CSS και αν προσθέσετε ομαλή κίνηση σε αυτό, τότε δεν θα νιώσετε καμία διαφορά από το μενού JS.

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

συμπέρασμα

Και οι δύο επιλογές λειτουργούν. Το μενού στο JS, ας πούμε, είναι σωστό από την άποψη της χρήσης κώδικα. Ένα μενού στο CSS είναι ένα «δεκανίκι», ένα είδος «εκδήλωσης εφευρετικότητας», κατάλληλο για όσους δεν θέλουν να κατανοήσουν το JS και πρόκειται να το χρησιμοποιήσουν μόνο στα έργα τους. Για προσαρμοσμένους ιστότοπους, δεν υπάρχουν «πατερίτσες» Συνιστώ ανεπιφύλακτα τη δημιουργία διατάξεων προσαρμοσμένων για περαιτέρω χρήση του JS από άλλους ειδικούς.