με ένα αναγνωριστικό "fade" το οποίο θα είναι το μαύρο εξώφυλλο που σκουραίνει το περιεχόμενο όταν πατηθεί το εικονίδιο του μενού.
Τέλος, καλούμε το jQuery από την Google και το δικό μας αρχείο δέσμης ενεργειών στο οποίο θα δουλέψουμε λίγο. Αλλά πρώτα ας περάσουμε από τα στυλ.
Στυλ με CSS
Έτσι, δεν θα περάσουμε από όλα τα στυλ CSS (αν θέλετε να επιθεωρήσετε ή να δείτε την προέλευση στο demo), καθώς χρησιμοποιούνται ως επί το πλείστον για το γενικό στυλ της σελίδας, που δεν είναι ο στόχος του παρόντος άρθρου. Θα το σπάσουμε και θα δούμε μερικά κομμάτια κώδικα που είναι σημαντικά για το αποτέλεσμα. Έτσι, πρώτα απ 'όλα:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Θα ξεκλειδώσουμε τα πράγματα, διασφαλίζοντας ότι εάν το πρόγραμμα περιήγησης του χρήστη δεν διαθέτει διαθέσιμο JavaScript (αυτό είναι το όνομα κλάσης στο στοιχείο HTML που είδαμε νωρίτερα με τη χρήση του Modernizr) τότε θα εμφανιστεί το # fallback-nav στην κεφαλίδα και θα κρύψουμε το #fade DIV καθώς και το εικονίδιο πλοήγησης. Αυτή είναι η εναλλακτική μας λύση, έτσι ώστε το εφεδρικό μενού πρέπει να σχεδιαστεί με πιο παραδοσιακό τρόπο. Επίσης, κρύβουμε αυτή τη λύση εάν είναι διαθέσιμη η JavaScript, όπως μπορείτε να δείτε στην τελευταία γραμμή.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Έτσι σε αυτό το τμήμα σχεδιάζουμε το εικονίδιο του μενού στην κεφαλίδα, είναι αρκετά απλό, δίνοντάς του μια σχετική θέση και ένα υψηλό z-index (το οποίο θα είναι χρήσιμο αργότερα όταν το υπόλοιπο περιεχόμενο ξεθωριάσει θα παραμείνει μπλουζα). Αλλάζουμε επίσης το χρώμα σε λευκό όταν έχει μια κατηγορία "ανοιχτό" που θα προσθέσουμε και θα πάρουμε μαζί με το jQuery. Μπορούμε επίσης να δούμε ότι το single div με ένα id του "fade" εκτείνεται για να γεμίσει ολόκληρη την οθόνη και να γεμίσει με ένα μαύρο στερεό με 50% διαφάνεια. Εάν ο χρήστης δεν έχει JavaScript, τότε αυτό το μαύρο φίλτρο θα είναι κρυμμένο, αν όχι θα το κρύψουμε με το jQuery. Τώρα ας δούμε το ίδιο το μενού:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Τέλος, αλλά όχι λιγότερο από το κεντρικό μενού. Πρέπει να προσθέσω πρώτα ότι αυτός είναι ο απλουστευμένος κώδικας που θα χρειαζόταν αρκετά προθέματα προμηθευτών πριν να είναι συμβατός με το πρόγραμμα περιήγησης. Για να το επιτύχουμε συνιστώ να χρησιμοποιήσω ένα φοβερό εργαλείο όπως το Autoprefixer για να προσθέσετε όλα τα σωστά προθέματα για εσάς.
Έτσι, λέγοντας, ας δούμε τι συνεπάγεται: πρώτα απ 'όλα έχει σταθερή τοποθέτηση στην κορυφή αυτής της σελίδας και αρνητική 250px προς τα δεξιά. Αυτό σημαίνει ότι υπάρχει, αλλά μόνο "off-screen" (καθώς έχει μέγιστο πλάτος 250px). Το ύψος είναι επίσης 100%, έτσι ώστε να γεμίζει ολόκληρο το παράθυρο από πάνω προς τα κάτω. Το μενού χρειάζεται επίσης ένα z-δείκτη μεταξύ 0 και 9 (πάνω από το μαύρο φίλτρο). Τότε, όταν συμβαίνει η μαγεία, έχει μια οθόνη: flex; ιδιοκτησία, καθώς και μια άλλη συνδεδεμένη ιδιότητα της «κατεύθυνσης ευελιξίας» (η οποία έχει οριστεί σε "στήλη" εδώ αντί για την προεπιλεγμένη "σειρά" που σημαίνει ότι τα παιδιά των flex στοιχείων-οι συνδέσεις στο μενού-θα γεμίσουν ολόκληρο το ύψος γονέα του σε ίσα μέρη).
Έτσι, όλα αυτά στόχευαν το κατόχου μενού # main-nav, ενώ στη συνέχεια, όταν σχεδίαζαν τους συνδέσμους, τους δώσαμε μια εύκαμπτη τιμή 1. Αυτό κάνει τους συνδέσμους να γεμίζουν εξίσου το ύψος. Στη συνέχεια, στους συνδέσμους αυτούς δίδεται επίσης μια αξία εμφάνισης του «flex» οι ίδιοι, πράγμα που σημαίνει ότι οποιαδήποτε στοιχεία μέσα στους συνδέσμους θα επηρεαστούν από αυτό. Βεβαιώνουμε ότι η καμπύλη ευθυγράμμισης εξακολουθεί να είναι "στήλη" και στη συνέχεια προσθέτουμε μια ιδιότητα του "justify-content: center". Αυτό κάνει το ίδιο το κείμενο μέσα από τους συνδέσμους κεντρικά κάθετα επίσης (γι 'αυτό υπάρχουν divs στο εσωτερικό του ![]()
ετικέτες του # main-nav, το οποίο δεν είναι ακριβώς σημασιολογικό, αλλά είναι ένας πολύ γρήγορος και εύκολος τρόπος για κάθετα κεντρικά στοιχεία.)
Τώρα δεν μπορούμε να δούμε τίποτα που μόλις κάναμε ακόμα, τώρα πρέπει να προσθέσουμε τη λειτουργικότητά μας με το δικό μας αρχείο scripts.js που κάναμε νωρίτερα.
Προσθέτοντας τη λειτουργικότητα με το jQuery
Το σενάριο για αυτό το αποτέλεσμα είναι πολύ μικρό και απλό, αλλά θα τα βάλω όλα εδώ πρώτα και στη συνέχεια θα εξηγήσω τι συμβαίνει:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"υπερχείλιση": "κρυφό"}); $ ('# main-nav'). ) .addClass ('ανοιχτό'). html ('x'); $ ('# fade') fadeIn (); } else αν ($ ('# navicon') hasClass ('ανοιχτό')) {$('body').animate({left: "0"} , 400) .css ({"υπερχείλιση": "κύλιση")), $ ('# main-nav'). ') .addClass (' κλειστό '). html (' ☰ '); $ (' fade ') fadeOut (); }})}}).
Έτσι πρώτα απ 'όλα κρύβουμε το μαύρο φίλτρο. Στη συνέχεια, το μόνο που κάνουμε είναι να περιληφθεί μέσα σε μια λειτουργία που συνδέεται με ένα συμβάν κλικ το οποίο συνδέεται με το σύνδεσμο εικονιδίων μενού. Όταν κάνετε κλικ, έχουμε δύο διαφορετικές περιπτώσεις ή καταστάσεις. ένα είναι όταν το μενού είναι ήδη κρυμμένο (όπως η προεπιλεγμένη κατάσταση) ή ένα όταν εμφανίζεται το μενού. Έτσι, ο σύνδεσμος με το εικονίδιο του μενού έχει ένα όνομα κλάσης κλειστό που προσθέσαμε, και έχουμε επίσης στυλ για ανοιχτό. Η πρώτη δήλωση "if" είναι ότι αν ο σύνδεσμος είναι κλειστός (ως εκ τούτου το προεπιλεγμένο). Αν συμβαίνει αυτό, τότε το σύνολο
το στοιχείο κινείται 250px προς τα αριστερά και σταματά την κύλιση της σελίδας. Το # main-nav div κινείται επίσης στη θέση του, αλλάζουμε τη σωστή τιμή από -250px σε 0. Στη συνέχεια καταργούμε την κλάση "κλειστό" από το σύνδεσμο και προσθέτοντας ένα από τα "ανοικτά" καθώς και αλλάζοντας το html από τον ειδικό χαρακτήρα των τριών γραμμών σε ένα "x". Τέλος, ξεθωριάζουμε στο μαύρο φίλτρο για να σκοτώσουμε το υπόλοιπο περιεχόμενο. Και αυτό είναι! Αυτό μας δίνει την ανοικτή κατάσταση του μενού.
Τώρα η εντολή "else if" στοχεύει στην ανοικτή κλάση στο σύνδεσμο μενού. Όταν το κάνουμε, κάνουμε το αντίθετο από ό, τι κάναμε πριν, μετακινώντας το σώμα πίσω στη θέση του, καθώς και μετακίνηση του μενού εκτός οθόνης ξανά. Αφαιρώντας την κατηγορία 'ανοιχτή' από το εικονίδιο του μενού, προσθέτοντας 'κλειστά' και αλλάζοντας το περιεχόμενο πίσω στο εικονίδιο, καθώς και ξεθώριασμα του #fade div. Εάν όλα πάνε σύμφωνα με το σχέδιο αυτό πρέπει να μοιάζει με τη λειτουργικότητα:
συμπέρασμα
Έτσι, εκεί έχουμε! Αυτός είναι ένας τρόπος να γίνει αυτό το δροσερό αποτέλεσμα που βλέπουμε όλο και περισσότερο τώρα με το ύφος του σύγχρονου webdesign, ειδικά σε κινητά σχέδια. Αυτό το αποτέλεσμα είναι μια ωραία και απλή λύση που δεν απαιτεί πρόσθετα και μπορεί να προσαρμοστεί πλήρως στις ανάγκες κάθε έργου. Επίσης, υπήρξε μια ευκαιρία να χρησιμοποιήσετε το flexbox καθώς και μερικά άλλα χρήσιμα εργαλεία. Επιτρέψτε μου να γνωρίζω στα σχόλια αν υπάρχει κάτι που θα είχατε κάνει διαφορετικά ή ακριβώς τι σκέφτεστε!
Προτεινόμενη εικόνα / μικρογραφία, εικόνα συρόμενης πόρτας μέσω Shutterstock.
