Δημιουργήστε ένα σταθερό μενού κατά την κύλιση της σελίδας. Διορθώθηκε το μενού κατά την κύλιση της σελίδας. Πώς να διορθώσετε το κορυφαίο μενού στο WordPress

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

Αυτόματη απόκρυψη Sticky HeaderjQuery σταθερό πρόσθετο πλοήγησης, το οποίο λειτουργεί με παρόμοια αρχή με το παραπάνω σενάριο, αλλά λιγότερο ομαλό, αν και, με την πρώτη ματιά, είναι λίγο πιο εύκολο. Δυστυχώς, δεν μπορώ να πω ότι η πλοήγηση είναι πλήρως προσαρμοστική, καθώς στις μικρές οθόνες τα στοιχεία του μενού γίνονται απλώς αριθμοί, κάτι που είναι πολύ περίεργο.

On Scroll Header EffectsΙσχυρό πρόσθετο jQuery για σταθερή γραμμή πλοήγησης. Μπορείτε να ορίσετε ορισμένα τμήματα στη σελίδα κατά την κύλιση, όταν φτάσετε στα οποία το πλαίσιο μετασχηματίζεται και μπορεί να αλλάξει εντελώς εμφάνιση. Μπορεί να υπάρχει οποιοσδήποτε αριθμός τέτοιων τμημάτων σε μια σελίδα.

Κινούμενη κεφαλίδα On-Scroll Ένα καλό πρόσθετο για την εφαρμογή μιας σταθερής γραμμής πλοήγησης. Λειτουργεί ως εξής: στην αρχή της σελίδας, βλέπουμε μια ψηλή κεφαλίδα που περιέχει το λογότυπο και το μενού. Κατά την κύλιση, η περιοχή κεφαλίδας με όλα τα στοιχεία, συμπεριλαμβανομένου του λογότυπου και της πλοήγησης, μειώνεται ομαλά χρησιμοποιώντας ιδιότητες και γίνεται μια στενή λωρίδα κολλημένη στο επάνω μέρος της οθόνης.

Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Αυτό είναι περισσότερο μια σημείωση για τον εαυτό μου, για να μην ξεχάσω τι ακριβώς έκανα όταν θέλω να επιστρέψω τα πάντα πίσω. Όλα ξεκίνησαν όταν ένας από τους αναγνώστες πρότεινε να γράψετε για ένα πρόσθετο για το WordPress που ονομάζεται Q2W3 Fixed Widget (Sticky Widget), το οποίο μπορεί να κάνει οποιοδήποτε widget στην πλαϊνή γραμμή να αιωρείται ή, με άλλα λόγια, να διορθώνεται.

Εκείνοι. Καθώς κάνετε κύλιση στη σελίδα, θα δείτε ότι το κύριο μέρος της πλαϊνής γραμμής θα ανέβει, αλλά το γραφικό στοιχείο που θα βρίσκεται στο κάτω μέρος θα παραμείνει στην περιοχή προβολής ανεξάρτητα από το πόσο μακριά μετακινηθείτε προς τα κάτω. Θα πω αμέσως τι να δημοσιεύσω συμφραζόμενη διαφήμισηαυτό απαγορεύεται και μπορεί να τιμωρηθεί για αυτό (όπως αποδείχθηκε στα σχόλια - το YAN το επιτρέπει, αλλά το Adsense το απαγορεύει).

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

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

Γιατί να διορθώσετε το μενού και να δημιουργήσετε μια αιωρούμενη πλαϊνή γραμμή;

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

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

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

Πώς να διορθώσετε το κορυφαίο μενού στο WordPress

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

Αν θυμάστε, στο άρθρο σχετικά με τη βελτιστοποίηση της ταχύτητας φόρτωσης σελίδων, πρέπει να προσπαθήσετε να συνδυάσετε όλα τα CSS και JS σε ένα κοινό (με την έννοια δύο - ένα για στυλ και το άλλο για σενάρια). Έτσι, στην πραγματικότητα, πρόσθεσα τις γραμμές κώδικα που δίνονται ακριβώς από κάτω σε ένα τέτοιο αρχείο. Αν και μπορείτε να τα προσθέσετε απευθείας σε Κώδικας HTML, που περιβάλλεται από ετικέτες σεναρίου. Για παράδειγμα, αυτό μπορεί να γίνει στο πρότυπο header.php μέσα στις ετικέτες head.

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

Στην περίπτωσή μου, ο κώδικας για τη διόρθωση του επάνω μενού μοιάζει με αυτό:

$(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (επάνω< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Επιτρέψτε μου να σας υπενθυμίσω ότι μπορείτε να επικολλήσετε αυτό το κομμάτι κώδικα σε:

  • Ένα αρχείο με την επέκταση .js που βρίσκεται στο φάκελο με το θέμα που χρησιμοποιείτε (/wp-content/themes/theme). Είναι κατάλληλο για εσάς μόνο εάν έχει γραφτεί μια γραμμή για αυτό στο αρχείο header.php για τη φόρτωσή του μαζί με τις ιστοσελίδες του ιστότοπού σας, η οποία μπορεί να μοιάζει με αυτό:
  • Μπορείτε να χρησιμοποιήσετε το ίδιο το αρχείο header.php, καταλήγοντας αυτόν τον κωδικόμεταξύ των ετικετών κεφαλιού ανοίγματος και κλεισίματος και τυλίγοντάς τους σε ετικέτες σεναρίου, για παράδειγμα ως εξής: $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); αν (μπλουζα< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Μπορείτε επίσης να γράψετε αυτόν τον κώδικα σε ετικέτες σεναρίου σε οποιοδήποτε άλλο μέρος. Το κύριο πράγμα είναι ότι φορτώνει τις σωστές σελίδες blog. Για παράδειγμα, μπορείτε να το κάνετε στο footer.php πριν από το κλείσιμο της ετικέτας σώματος.

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

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

    Κοιτάξτε, για σαφήνεια, θα δώσω τον κώδικα Html με τον οποίο σχηματίζεται το επάνω μενού στο δικό μου Πρότυπο WordPress blog (ζει στο αρχείο header.php από το):

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