Πολύ συχνά, σε ιστότοπους με πολύ περιεχόμενο, ο επισκέπτης χάνεται στη σελίδα και πρέπει να κάνει κύλιση στην κορυφή της σελίδας για να βρει το μενού πλοήγησης. Οι τεχνολογίες δεν μένουν ακίνητες, οι οθόνες παρακολούθησης και οι αναλύσεις τους γίνονται μεγαλύτερες, επομένως τώρα σε έναν ιστότοπο δεν είναι πλέον κρίμα να διατίθενται 40 pixel στην κορυφή για ένα σταθερό μενού κατά την κύλιση μιας σελίδας ιστότοπου. Ο επισκέπτης θα μπορεί να βλέπει πάντα σε ποιο τμήμα βρίσκεται, καθώς και να έχει γρήγορη πρόσβαση στο μενού πλοήγησης. Τελικά, αυτό αυξάνει το βάθος της περιήγησης στον ιστότοπο :)
Ποια είναι η ουσία ενός σταθερού μενού πλοήγησης σε έναν ιστότοπο; Αρχικά, το μενού μας βρίσκεται στη συνηθισμένη του θέση, κάπου στην κεφαλίδα, στην περίπτωσή μου σε απόσταση 140 εικονοστοιχείων από την επάνω άκρη. Μόλις ο επισκέπτης κάνει κύλιση στη σελίδα κατά τα ίδια 140 εικονοστοιχεία στο κάτω μέρος, το μενού στερεώνεται στο επάνω μέρος του παραθύρου και παραμένει εκεί για τον υπόλοιπο χρόνο μέχρι να επιστρέψει η κύλιση στην επάνω θέση.
Ένα σταθερό μενού κατά την κύλιση μιας σελίδας είναι ουσιαστικά ένας πίνακας ελέγχου που είναι πάντα μαζί σας. Το μενού μας θα είναι απλό.
Από τη θεωρία στην πράξη. Όλα είναι αρκετά απλά και μινιμαλιστικά, τα περισσότερα από τα οποία δίνονται σε στυλ που μπορείτε να προσαρμόσετε για τον εαυτό σας. Έφτιαξα ένα σταθερό μενού όπως στην εικόνα· όταν γίνεται κύλιση, το χρώμα του μενού γίνεται ελαφρώς διαφανές ώστε να μην φαίνεται βαρύ και να φαίνεται το περιεχόμενο από κάτω.
Τα στυλ μας. Έχω ένα μενού με πλάτος 1180 px, που βρίσκεται στο κέντρο. Η κεφαλίδα έχει ύψος 180 εικονοστοιχεία, το μενού κύλισης περιλαμβάνεται σε αυτήν και καταλαμβάνει 40 εικονοστοιχεία. Αυτό σημαίνει την απόσταση από την κορυφή 140 εικονοστοιχεία. Ας θυμηθούμε αυτόν τον αριθμό)
#header ( ύψος: 180 px; ) #navigation( φόντο: #EF0505; ύψος: 40 px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); μέγεθος γραμματοσειράς: 16px; ύψος γραμμής: 40px; θέση: σχετική; επάνω: 140 εικονοστοιχεία; ) #navigation.fixed( θέση: σταθερό; επάνω: 0; πλάτος: 100%; φόντο: rgba(239, 5, 5, 0,95); ) #navigation ul(πλάτος: 1180px; padding -αριστερά: 0; περιθώριο: 0 αυτόματο; εμφάνιση: μπλοκ; ) #menu li( float: αριστερά; στιλ λίστας: κανένα; padding: 0 25px; περίγραμμα-δεξιά: 1px συμπαγές #D60000; ) #menu a ( χρώμα: #fff; κείμενο-διακόσμηση: κανένα; γραμματοσειρά-οικογένεια: Verdana; ) #menu>li a:hover( χρώμα: #656565; μετάβαση: χρώμα 0,5 δευτ. ευκολία; )
Και εδώ είναι οι λίγες γραμμές κώδικα που κάνουν το μαγικό) Θέτουμε τις προϋποθέσεις για την κύλιση της σελίδας, πάνω από 140 px ή κάτω. Ανάλογα με αυτό, η σταθερή κλάση εκχωρείται στο μενού πλοήγησής μας. Και με αυτήν την κατηγορία, όπως αναφέρθηκε παραπάνω, κάνουμε το μενού σταθερό και καρφιτσωμένο στην κορυφή.
JQuery(function($) ( $(window).scroll(function())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) other if ($(this).scrollTop()
Λάβετε υπόψη ότι εάν υπάρχουν μεμονωμένα εισαγωγικά στον κωδικό που περικλείεται στο echo "" , θα πρέπει να διαφύγουν, π.χ. βάλε μια ανάστροφη κάθετο (\") μπροστά από κάθε ένα από αυτά, χωρίς παρενθέσεις φυσικά.
Σε γενικές γραμμές, αποδείχθηκε όπως αποδείχθηκε. Θα πρέπει να αποφασίσετε μόνοι σας πώς να το επισυνάψετε συγκεκριμένα στο θέμα σας - όταν έχετε χρόνο, είναι ακόμη διασκεδαστικό να «σηκώνετε τον εγκέφαλό σας». Ευχαριστώ.
Καλή σου τύχη! Τα λέμε σύντομα στις σελίδες του ιστότοπου του ιστολογίου
Μπορεί να σας ενδιαφέρει
Το WebPoint PRO είναι ένα αποκριτικό θέμα WordPress με ευρεία λειτουργικότητα και ικανή τεχνική βελτιστοποίηση μηχανών αναζήτησης 
Share42 - ένα σενάριο για την προσθήκη κουμπιών κοινωνικής δικτύωσης και σελιδοδεικτών στον ιστότοπο (υπάρχει μια επιλογή αιωρούμενου πίνακα)
Τα οποία βρίσκονται όλο και πιο συχνά σε σελίδες ιστολογίων και άλλων πόρων. Η χρήση τέτοιων ράβδων πλοήγησης είναι απολύτως δικαιολογημένη. Ένας από τους κύριους λόγους για την ενεργή χρήση αυτών των πρόσθετων jQuery είναι ότι το μενού βρίσκεται πάντα στα χέρια του επισκέπτη, ακόμα κι αν βρίσκεται στο κάτω μέρος της σελίδας. Επιπλέον, ένα σταθερό μενού καταλαμβάνει λίγο χώρο και δεν αποσπά την προσοχή από το κύριο περιεχόμενο. Σε γενικές γραμμές, ένα σταθερό μενού βελτιώνει τη χρηστικότητα του ιστότοπου.
Έχω συγκεντρώσει μια συλλογή από τα καλύτερα, κατά τη γνώμη μου, δωρεάν πρόσθετα jQuery για την υλοποίηση ενός σταθερού μενού. Προσπάθησα να διασφαλίσω ότι κάθε ένα από τα πρόσθετα ήταν μοναδικό κατά κάποιο τρόπο, έτσι ώστε οποιοδήποτε πρόσθετο από την επιλογή να μπορεί να χρησιμοποιηθεί ειδικά στο έργο σας. Στη συλλογή μπορείτε να βρείτε τόσο απλά όσο και πιο σύνθετα πρόσθετα με κινούμενα σχέδια κ.λπ.
Εάν χρειάζεστε ένα πολύ απλό σταθερό μενού, κάτι σαν το πώς υλοποιήσαμε ένα sticky panel με κουμπιά κοινωνικής δικτύωσης, μπορείτε να το κάνετε χωρίς πρόσθετα jQuery, επειδή η φόρτωση της σελίδας με σενάρια δεν είναι πολύ καλή, αλλά θα μιλήσουμε για αυτό στα ακόλουθα άρθρα . Εγγραφείτε στο κανάλι ή τις σελίδες μας για να μην χάνετε ενδιαφέροντα υλικά.
Ετσι. Ακολουθούν 6 πρόσθετα jQuery για τη δημιουργία ενός σταθερού μενού.
