Cum să faci o casetă derulantă Bio cu CSS

După ce am lansat cea mai recentă reproiectare a Theme Lab, am primit o serie de comentarii despre caseta „bio derulantă” pe care o am în bara mea de navigare. Am codificat-o cu doar câteva linii de CSS, împreună cu o imagine de fundal.

În acest sfat CSS, voi explica cum poți avea un efect de hover similar pe propriile tale site-uri.

Exemplul

In this example, I’ll be using a text widget in the Twenty Eleven theme, the new default as of WordPress 3.2.

Practic, odată ce treci cu mouse-ul peste div-ul care conține widget-ul, va apărea un div „ascuns” care va fi caseta noastră bio derulantă.

Observați în imaginea din stânga, caseta bio gri nu va apărea decât dacă treceți cu mouse-ul peste div-ul care conține titlul „Bio Hover”.

Selectorul

Nu este foarte important să ai un selector CSS unic pentru a stiliza div-ul în care vrei să plasezi caseta bio derulantă. Practic, acest lucru se datorează faptului că, dacă nu ai marcajul însoțitor în acel div, oricum nu ar apărea nimic în cazul unei stări de hover.

Deși în cazul Twenty Eleven, am fi putut folosi doar stilizarea clasei „aside”, șansele sunt că vrei o casetă bio derulantă doar pe unul dintre div-urile tale oricum, așa că vom fi mai specifici.

Din fericire, cu WordPress, acesta generează o mulțime de selectori CSS unici pe care îi poți folosi. În acest exemplu, generează #test-3 pe care îl vom folosi de acum înainte.

Notă: Acest lucru poate varia în funcție de instalarea dvs. WordPress. Folosiți ceva de genul Chrome Developer Tools pentru a găsi ușor selectorul.

Marcaj HTML

În acest exemplu, marcajul HTML poate fi plasat direct în widget-ul text WordPress. Acesta este ceea ce ați pune:

<div class="bio-dropdown">
<img class="photo"  alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" />
<p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p>
</div>

Dacă nu vrei să-mi furi identitatea, probabil vei dori să înlocuiești fotografia cu o poză cu tine. De asemenea, o poți elimina opțional.

Deoarece folosim un widget WordPress, marcajul exterior este deja generat pentru noi. Acesta este în totalitate.

<aside id="text-3" class="widget widget_text">
<h3 class="widget-title">Bio Hover</h3>
<div class="textwidget">
<div class="bio-dropdown"><img class="photo"  alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" /><p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p></div>
</div>
</aside>

Dacă faci asta pe un site HTML brut, vei avea nevoie de un fel de wrapper (cum este acesta în „aside”) pentru caseta bio derulantă cu altceva în ea, altfel nu există nimic peste care să treci cu mouse-ul pentru a derula în jos.

Exemplu din viața reală: Div-ul meu bio derulant este în interiorul unei etichete li din meniul meu de navigare.

Primele două linii de CSS

Primele două linii stabilesc restul, așa că am pus acest lucru în propria sa secțiune.

#text-3 { position: relative; }
.bio-dropdown { display: none; }

Explicație

• Prima linie: Setăm wrapper-ul casetei bio derulante să aibă poziționare relativă. Acest lucru face mai ușor să poziționăm absolut caseta bio derulantă mai aproape de wrapper-ul original.
• A doua linie: Aceasta face, în esență, caseta bio derulantă invizibilă în mod implicit. Ar trebui să apară doar când treci cu mouse-ul peste ceva, îți amintești?

Notă: Dacă nu ești un fan al display: none; sau crezi că afectează SEO-ul sau ceva de genul, poți folosi și ceva de genul position: absolute; left: -100000em; care o va muta practic atât de departe de pagină, încât nimeni nu o va vedea oricum.

Restul CSS-ului

Următorul cod CSS se ocupă de aspectul și senzația casetei bio derulante.

#text-3:hover .bio-dropdown {
display: block; z-index: 99;
position: absolute; top: 25px;
background: #ccc; padding: 10px 10px 0 10px;
font-size: 11px; line-height: 18px; color: #666;
}

Explicație

Aici folosim în cele din urmă selectorul #text-3 împreună cu pseudoclasa :hover pentru a face ca fereastra derulantă de biografie să apară doar atunci când plutești peste widgetul de text.

• Prima linie: display: block; face ca fereastra derulantă de biografie să fie vizibilă. z-index: 99; asigură că fereastra va fi afișată deasupra tuturor celorlalte, neobstrucționată.
• A doua linie: Aceasta poziționează fereastra sub secțiunea laterală, la aproximativ 25 de pixeli.
• A treia linie: Acestea sunt doar câteva stiluri cosmetice, setând fundalul la o culoare gri deschis cu spațiere adecvată.
• A patra linie: Aceasta este o tipografie autoexplicativă.

Notă: Despre prima linie, dacă folosiți tehnica position: absolute; left: -100000em; în loc de display: none; așa cum am explicat mai sus, utilizarea display: block aici nu ar fi necesară (deoarece elementele div sunt deja considerate elemente de nivel bloc oricum). În schimb, ar trebui să folosiți left: 0; pentru a muta div-ul înapoi pe pagină.

Și pentru imagine, doar un simplu float și o margine dreaptă.

.bio-dropdown .photo { float: left; margin-right: 10px; }

Integrare WordPress

Nu mă pot gândi la o modalitate bună de a integra acest lucru într-un meniu dinamic WordPress (wp_nav_menu) fără a filtra excesiv ceva. Cea mai ușoară metodă ar putea fi codificarea manuală a navigării tale și să te obișnuiești cu asta (ceea ce fac pe toate site-urile mele).

Dacă aveți tehnici despre cum să inserați markup într-un element de meniu WordPress, ceea ce este necesar pentru acest lucru, aș dori să aud despre ele în comentarii. Sunt sigur că este posibil, dar depășește scopul acestui post cu sfaturi CSS.

Concluzie

Da, realizez că probabil nu ați dori să puneți o fereastră derulantă de biografie în bara laterală, ci ați pune-o într-un loc cu spațiu limitat care nu are loc pentru a fi afișată complet (cum ar fi o bară de navigare înghesuită).

Din fericire, puteți folosi această tehnică aproape oriunde. Am vrut doar să trec în revistă o tehnică de bază despre cum să afișați un div întreg la hover.

Nu este prea complicat și nu aveți nevoie de niciun fel de JavaScript sofisticat pentru a face acest lucru, deși dacă ați dori un efect de estompare high-tech, probabil ar trebui să folosiți JavaScript.