Πώς να οικοδομήσουμε μια jQuery Dropdown στο WordPress

Παρόλο που μπορείτε να κωδικοποιήσετε ολόκληρο το αναπτυσσόμενο μενού σε HTML και CSS (Cascading Style Sheets), το jQuery σας επιτρέπει να προσθέσετε κάποια κινούμενα σχέδια που λειτουργούν σε προγράμματα περιήγησης. Το JQuery είναι μια βιβλιοθήκη που προσθέτει στο JavaScript και καθιστά τη συγγραφή σεναρίων ευκολότερη για τους σχεδιαστές που είναι λιγότερο εξοικειωμένοι με τον προγραμματισμό, αν και βοηθούν κάποιες δεξιότητες προγραμματισμού. Η εφαρμογή των εφέ CSS και jQuery στο HTML WordPress που δημιουργεί για τα blogs απαιτεί να γράφετε ένα άκαμπτο, ευέλικτο CSS και να ελέγχετε ότι το jQuery είναι κρυμμένο.

Στυλ μενού με CSS

1.

Ανοίξτε το αρχείο "style.css" για το θέμα σας WordPress, χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας κώδικα ή το Σημειωματάριο. Ξεκινήστε δίνοντας όλο το μενού μια σχετική θέση:

.menu {position: relative; }}

Η σχετική τοποθέτηση καθιστά δυνατή την απόλυτη τοποθέτηση σε υπο-μενού χωρίς να έχουν επιπλέει στις γωνίες του παραθύρου του προγράμματος περιήγησης. Χρησιμοποιήστε το όνομα της κατηγορίας "μενού" για να στοχεύσετε οποιοδήποτε μενού σε ένα θέμα WordPress. Το WordPress προσθέτει αυτή την τάξη στα μενού αυτόματα.

2.

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

.menu li {float: αριστερά. θέση: σχετική. }}

3.

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

.menu a {φόντο: μαύρο χρώμα: άσπρο; γραμματοσειρά-μέγεθος: 18px; γραμματοσειρά-βάρος: έντονα. κείμενο-διακόσμηση: κανένα? padding: 10px; εμφάνιση: μπλοκ? }}

Η ιδιότητα "διακόσμηση κειμένου" καταργεί τις υπογραμμίσεις.

4.

Ορίστε μια κατάσταση αιωρισμού για τους συνδέσμους χρησιμοποιώντας την ψευδο-κατηγορία ": hover":

.menu a: hover {φόντο: # aa0000; }}

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

5.

Απόκρυψη των δευτερευόντων μενού μετατοπίζοντας όλα τα ένθετα "

"Περιεχόμενο στα αριστερά της οθόνης του προγράμματος περιήγησης:

.menu ul {θέση: απόλυτη; αριστερά: -9999px; }}

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

6.

Προσθέστε "διαγραφή: και τα δύο" στα υπομενού για να τα καταστήσετε κάθετα. Δώστε στα υπο-μενού ένα πλάτος ρύθμισης:

.menu ul li {ξεκάθαρο: αμφότερα. πλάτος: 200px; }}

7.

Μεταφέρετε τα δευτερεύοντα μενού όταν ο χρήστης κινείται με το ποντίκι πάνω από το γονικό στοιχείο του, το σύνδεσμο κορυφαίου επιπέδου στη γραμμή μενού:

.menu li: hover ul {αριστερά: 0; }}

Γράψτε το jQuery Script

1.

Ανοίξτε το αρχείο "header.php" για το θέμα σας και ελέγξτε ότι εμπλέκει το jQuery:

Προσθέστε αυτόν τον κώδικα πάνω από την ετικέτα "" και την ετικέτα, αν δεν υπάρχει ήδη.

2.

Ανοίξτε το σενάριο "footer.php" και βρείτε ένα ζευγάρι "

3.

Επιλέξτε τα δευτερεύοντα μενού και χρησιμοποιήστε τη λειτουργία CSS για να τα αποκρύψετε:

4.

Επιλέξτε τα στοιχεία λίστας στο μενού σας και χρησιμοποιήστε το συμβάν "hover" για να προσθέσετε το αναπτυσσόμενο κινούμενο σχέδιο:

jQuery ('. menu'). (h) () () (.) (.

Αυτός ο κώδικας πηγαίνει κάτω από το πρώτο "})", το οποίο βρίσκεται στο έγγραφό σας μέχρι στιγμής. Στο jQuery, το "jQuery (αυτό)" είναι ένας επιλογέας που αντιγράφει τον πρώτο επιλογέα της λειτουργίας, στην περίπτωση αυτή ".menu li". Η λειτουργία βρίσκει κάθε "

"Ετικέτα που έχει ενσωματωθεί στο στοιχείο της λίστας που έχει μετακινηθεί, σταματά οποιαδήποτε άλλα κινούμενα σχέδια και στη συνέχεια ολισθαίνει τη λίστα με τα ένθετα - το δευτερεύον μενού - προς τα κάτω.

5.

Αλλάξτε τη λειτουργία slide-down για να προσθέσετε μια κινούμενη εικόνα όταν ο χρήστης πετάει το δείκτη του ποντικιού μακριά από ένα στοιχείο μενού. Μπορείτε να προσθέσετε μια κινούμενη εικόνα με ξεθωριασμένα στοιχεία στο hover-out:

jQuery (), jQuery ('), jQuery ('), jQuery (') ) .find ('ul') .stop (αληθής, αληθής) .fadeOut ('αργή');});