Πώς να φτιάξετε ένα βιολογικό αναπτυσσόμενο κουτί με CSS

Αφού κυκλοφόρησα το πιο πρόσφατος επανασχεδιασμός Theme Lab, Είχα πολλά σχόλια σχετικά με το αναπτυσσόμενο πλαίσιο “bio” που έχω στη γραμμή πλοήγησης. Το κωδικοποίησα με λίγες γραμμές CSS μαζί με μια εικόνα φόντου.


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

Το παράδειγμα

Σε αυτό το παράδειγμα, θα χρησιμοποιήσω ένα γραφικό στοιχείο κειμένου στο Είκοσι έντεκα θέμα, η νέα προεπιλογή από το WordPress 3.2.

Βασικά, μόλις τοποθετήσετε το δείκτη του ποντικιού πάνω από το div που περιέχει το widget, θα εμφανιστεί ένα “κρυφό” div που θα είναι το αναπτυσσόμενο πλαίσιο βιογραφικών μας.

Σημειώστε στην εικόνα στα αριστερά, το γκρι βιολογικό πλαίσιο δεν θα εμφανιστεί εκτός εάν τοποθετήσετε το δείκτη που περιέχει την επικεφαλίδα “Bio Hover”.

Ο Επιλογέας

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

Παρόλο που στην περίπτωση του Twenty Eleven, θα μπορούσαμε να ξεφύγουμε με το να διαμορφώσουμε την τάξη «στην άκρη», είναι πιθανό να θέλετε μόνο ένα αναπτυσσόμενο πλαίσιο βιο σε ένα από τα div σας ούτως ή άλλως, οπότε θα γίνουμε πιο συγκεκριμένοι.

Ευτυχώς με το WordPress, εκτοξεύει έναν τόνο μοναδικών επιλογών CSS που μπορείτε να χρησιμοποιήσετε. Σε αυτό το παράδειγμα, ξεχωρίζει το # test-3 το οποίο θα χρησιμοποιούμε από τώρα και στο εξής.

Σημείωση: Αυτό μπορεί να διαφέρει ανάλογα με την εγκατάσταση του WordPress. Χρησιμοποιήστε κάτι όπως τα Εργαλεία προγραμματιστών Chrome για να βρείτε εύκολα τον επιλογέα.

Σήμανση HTML

Σε αυτό το παράδειγμα, η σήμανση HTML μπορεί να τοποθετηθεί απευθείας στο widget κειμένου του WordPress. Αυτό είναι που θα βάλατε:

Λίλαντ!

Χαίρετε. Είμαι ο Leland Fiegel και είμαι ο δημιουργός και ιδρυτής του Theme Lab. Μου αρέσει να γράφω κώδικα, ειδικά HTML, CSS και για WordPress.

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

Δεδομένου ότι χρησιμοποιούμε ένα widget WordPress, η απομακρυσμένη σήμανση δημιουργείται ήδη για εμάς. Αυτό είναι το σύνολο.

Bio Hover

Λίλαντ!

Χαίρετε. Είμαι ο Leland Fiegel και είμαι ο δημιουργός και ιδρυτής του Theme Lab. Μου αρέσει να γράφω κώδικα, ειδικά HTML, CSS και για WordPress.

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

Παράδειγμα πραγματικής ζωής: Το bio dropdown div μου βρίσκεται μέσα σε μια ετικέτα στο μενού πλοήγησης.

Πρώτες δύο γραμμές CSS

Οι δύο πρώτες γραμμές δημιούργησαν το υπόλοιπο, οπότε το έβαλα στο δικό του τμήμα.

# text-3 {θέση: σχετικός; }
.βιο-αναπτυσσόμενο μενού {display: none; }

Εξήγηση

  • Πρώτη γραμμή: Ρυθμίζουμε το περιτύλιγμα του αναπτυσσόμενου βιογραφικού ώστε να έχει σχετική θέση. Αυτό καθιστά ευκολότερη την απόλυτη τοποθέτηση του αναπτυσσόμενου κουτιού bio πιο κοντά στο αρχικό περιτύλιγμα.
  • Δεύτερη γραμμή: Αυτό ουσιαστικά κάνει το αναπτυσσόμενο πλαίσιο βιο αόρατο από προεπιλογή. Υποτίθεται ότι εμφανίζεται μόνο όταν τοποθετείτε πάνω από κάτι, θυμηθείτε?

Σημείωση: Εάν δεν είστε οπαδός της οθόνης: κανένας; ή νομίζετε ότι βλάπτει το SEO σας ή κάτι τέτοιο, μπορείτε επίσης να χρησιμοποιήσετε κάτι σύμφωνα με τη θέση: απόλυτο. αριστερά: -100000em; που θα το μετακινήσει ουσιαστικά τόσο μακριά από τη σελίδα, κανείς δεν θα το δει ποτέ.

Το υπόλοιπο του CSS

Ο παρακάτω κώδικας CSS χειρίζεται την εμφάνιση και την αίσθηση του αναπτυσσόμενου πλαισίου βιογραφικών.

# text-3: αιωρηθείτε .bio-dropdown {
οθόνη: μπλοκ; ευρετήριο z: 99;
θέση: απόλυτη; κορυφή: 25 εικονοστοιχεία;
φόντο: #ccc; επένδυση: 10px 10px 0 10px;
μέγεθος γραμματοσειράς: 11px; ύψος γραμμής: 18 εικονοστοιχεία; χρώμα: # 666;
}

Εξήγηση

Εδώ χρησιμοποιούμε τελικά τον επιλογέα # text-3 μαζί με το: hover pseudoclass για να κάνουμε το αναπτυσσόμενο πλαίσιο βιογραφίας να εμφανίζεται μόνο όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το widget κειμένου.

  • Πρώτη γραμμή: Η οθόνη: μπλοκ; κάνει το αναπτυσσόμενο πλαίσιο βιο ορατό. Ο δείκτης z: 99; διασφαλίζει ότι το πλαίσιο θα εμφανίζεται πάνω από όλα τα άλλα, χωρίς εμπόδια.
  • Δεύτερη γραμμή: Αυτό τοποθετεί το πλαίσιο κάτω από την άκρη περίπου 25 pixel.
  • Τρίτη γραμμή: Αυτά είναι μόνο μερικά καλλυντικά στυλ, ρυθμίζοντας το φόντο σε ανοιχτό γκρι με αξιοπρεπή επένδυση.
  • Τέταρτη γραμμή: Αυτή είναι μια αυτονόητη τυπογραφία.

Σημείωση: Σχετικά με την πρώτη γραμμή, εάν χρησιμοποιείτε τη θέση: απόλυτη; αριστερά: -100000em; τεχνική αντί για οθόνη: κανένα; όπως εξήγησα παραπάνω, η χρήση του display: block εδώ δεν θα ήταν απαραίτητη (δεδομένου ότι τα divs θεωρούνται ήδη ως στοιχεία επιπέδου μπλοκ ούτως ή άλλως). Αντ ‘αυτού θα πρέπει να χρησιμοποιήσετε αριστερά: 0; για να μετακινήσετε το div πίσω στη σελίδα.

Και για την εικόνα, απλά ένα απλό float και δεξί περιθώριο.

.bio-dropdown .photo {float: αριστερά; margin-right: 10 εικονοστοιχεία; }

Ενσωμάτωση WordPress

Δεν μπορώ να σκεφτώ έναν καλό τρόπο για να το ενσωματώσω σε ένα δυναμικό μενού του WordPress (wp_nav_menu) χωρίς να φιλτράρω τα χάλια από κάτι. Ο ευκολότερος τρόπος μπορεί να είναι σκληρά κωδικοποιήστε την πλοήγησή σας και ξεπεράστε την (το οποίο κάνω σε όλους τους ιστότοπούς μου).

Εάν έχετε οποιεσδήποτε τεχνικές σχετικά με τον τρόπο εισαγωγής σήμανσης σε ένα στοιχείο μενού WordPress, το οποίο απαιτείται για αυτό, θα ήθελα να το ακούσω στα σχόλια. Είμαι βέβαιος ότι είναι δυνατό, αλλά ξεπερνά το πεδίο αυτής της ανάρτησης CSS.

συμπέρασμα

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

Ευτυχώς, μπορείτε να χρησιμοποιήσετε αυτό το teqhnique σχεδόν οπουδήποτε. Ήθελα απλώς να εξετάσω μια βασική τεχνική για το πώς να εμφανίσω ένα ολόκληρο div στο hover.

Δεν είναι πολύ περίπλοκο και δεν χρειάζεστε φανταχτερά πράγματα Javascript για να το κάνετε, αν και αν θέλετε κάποιο εφέ εξασθένισης υψηλής τεχνολογίας, πιθανότατα θα πρέπει να χρησιμοποιήσετε κάποιο Javascript.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map