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

Το θέμα για την εβδομάδα # 3 του Weekly Coding Challenge είναι η πλοήγηση ! Ας μάθουμε λοιπόν λίγο περισσότερα για αυτό.

Πλοήγηση

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

Σε αυτό το άρθρο, αποφάσισα να δημιουργήσω ένα Tab Bar Navigation, αλλά μπορείτε να δημιουργήσετε οποιοδήποτε είδος πλοήγησης θέλετε.

Εμπνεύστηκα από αυτό το σχέδιο του Aurelien Salomon. Εδώ θα είναι το τελικό αποτέλεσμα αυτού που πρόκειται να οικοδομήσουμε:

Το HTML

Η δομή HTML θα είναι απλή. Θα έχουμε ένα .tab-nav-containerκαι τέσσερα .tabδευτερόλεπτα σε αυτό:

House

Likes

Search

Profile

Όπως μπορείτε να δείτε, το καθένα .tabέχει ένα εικονίδιο (από το FontAwesome), το αντίστοιχο κείμενο και μερικές επιπλέον τάξεις που θα χρησιμοποιηθούν για να δώσουν σε κάθε καρτέλα συγκεκριμένες background-colorκαι colorιδιότητες. Επίσης η .activeτάξη, η οποία θα χρησιμοποιηθεί για το στυλ της ενεργής καρτέλας. Αρκετά βασικό, σωστά; ;

Το CSS

Αρχικά, ας διαμορφώσουμε το .tab-nav-container:

Σημείωση : έχουμε ένα fixedπλάτος στο κοντέινερ καθώς δεν θέλουμε να αλλάξει το μέγεθός του όταν αλλάζουμε το ενεργό, .tabκαθώς κάθε καρτέλα μπορεί να έχει κείμενο που είναι είτε μεγαλύτερο ή μικρότερο σε μέγεθος (π.χ. Αρχική σελίδα (4 γράμματα) έναντι Προφίλ (6 γράμματα)).

Χρησιμοποιούμε για flexboxνα κατανείμουμε .tabομοιόμορφα μέσα στο δοχείο. Εκτός από αυτό πιστεύω ότι το CSS είναι αρκετά αυτονόητο.

Επόμενο… το .tabστυλ:

.tab { background-color: #ffffff; border-radius: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 20px; margin: 0 10px; transition: background 0.4s linear; } .tab i { font-size: 1.2em; } .tab p { font-weight: bold; overflow: hidden; max-width: 0; } .tab.active p { margin-left: 10px; max-width: 200px; transition: max-width 0.4s linear; } .tab.active.purple { background-color: rgba(91, 55, 183, 0.2); color: rgba(91, 55, 183, 1); } .tab.active.pink { background-color: rgba(201, 55, 157, 0.2); color: rgba(201, 55, 157, 1); } .tab.active.yellow { background-color: rgba(230, 169, 25, 0.2); color: rgba(230, 169, 25, 1); } .tab.active.teal { background-color: rgba(28, 150, 162, 0.2); color: rgba(28, 150, 162, 1); }

Λίγα πράγματα που πρέπει να σημειώσετε εδώ:

  1. Για να έχουμε μια ομαλή μετάβαση όταν αλλάζουμε την .activeκαρτέλα, θέτουμε μια transition: backgroundιδιότητα στην .tabτάξη.
  2. Από προεπιλογή, η pετικέτα στο εσωτερικό του .tabέχει μια max-widthαπό 0και του overflowσυνόλου ιδιοκτησίας hidden. Αυτό συμβαίνει επειδή θέλουμε να εμφανίσουμε το κείμενο μόνο όταν .tabείναι ενεργό.
  3. Χρησιμοποιούμε τα μαθήματα προσαρμοσμένο χρώμα ( .purple, .pinkκλπ) να έχουν διαφορετικά χρώματα στις καρτέλες.

Ας βεβαιωθούμε ότι φαίνεται καλό και στο κινητό:

@media (max-width: 450px) { .tab-nav-container { padding: 20px; width: 350px; } .tab { padding: 0 10px; margin: 0; } .tab i { font-size: 1em; } }

Όπως μπορείτε να δείτε, συρρικνούμε το .tab-nav-containerπότε είναι το μέγιστο πλάτος της θύρας προβολής 450pxκαι μειώνουμε επίσης την επένδυση για να φαίνεται μικρότερη.

Η JavaScript

Στο τέλος, στο JS πρέπει να βεβαιωθούμε ότι όταν ο χρήστης κάνει κλικ σε άλλο, .tabη .activeκλάση προστίθεται και αφαιρείται από την προηγούμενη ενεργή .tab:

// Get all the tabs const tabs = document.querySelectorAll('.tab'); tabs.forEach(clickedTab => { // Add onClick event listener on each tab clickedTab.addEventListener('click', () => { // Remove the active class from all the tabs (this acts as a "hard" reset) tabs.forEach(tab => { tab.classList.remove('active'); }); // Add the active class on the clicked tab clickedTab.classList.add('active'); }); });

συμπέρασμα

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

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

Περισσότερα παραδείγματα για αυτήν την πρόκληση κωδικοποίησης

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

Επίσης, αν δεν το έχετε κάνει, φροντίστε να διαβάσετε τους «κανόνες» της εβδομαδιαίας πρόκλησης κωδικοποίησης αν θέλετε να συμμετάσχετε στην πρόκληση! Και γιατί όχι; Είναι ένας πολύ καλός τρόπος για να βελτιώσετε τις δεξιότητές σας στην κωδικοποίηση! ;

Καλή κωδικοποίηση! ;

Αρχικά δημοσιεύτηκε στο www.florin-pop.com.