Come Creare un Box a Scomparsa per la Bio con CSS

Dopo aver rilasciato il redesign più recente di Theme Lab, ho ricevuto numerosi commenti sulla casella "menu a discesa bio" che ho nella barra di navigazione. L'ho codificata con poche righe di CSS insieme a un'immagine di sfondo.

In questo post di suggerimenti CSS, spiegherò come puoi avere un effetto hover simile sui tuoi siti.

L'esempio

In questo esempio, utilizzerò un widget di testo nel tema Twenty Eleven, il nuovo predefinito da WordPress 3.2.

Fondamentalmente, una volta che passi il mouse sopra il div che contiene il widget, apparirà un div "nascosto" che sarà la nostra casella a discesa bio.

Nota nella foto a sinistra, la casella bio grigia non apparirà a meno che tu non passi il mouse sopra il div contenente l'intestazione "Bio Hover".

Il selettore

Non è molto importante avere un selettore CSS univoco per stilizzare il div in cui vuoi inserire la tua casella a discesa bio. Fondamentalmente questo perché se non hai il markup associato in quel div, nulla apparirebbe comunque in caso di stato hover.

Anche se nel caso di Twenty Eleven, potremmo cavarcela semplicemente stilizzando la classe "aside", è probabile che tu voglia una casella a discesa bio solo su uno dei tuoi div, quindi saremo più specifici.

Fortunatamente con WordPress, genera un sacco di selettori CSS univoci che puoi usare. In questo esempio, genera #test-3 che useremo d'ora in poi.

Nota: Questo potrebbe variare a seconda della tua installazione di WordPress. Usa qualcosa come Chrome Developer Tools per trovare facilmente il selettore.

Markup HTML

In questo esempio, il markup HTML può essere inserito direttamente nel widget di testo di WordPress. Questo è ciò che dovresti inserire:

<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>

A meno che tu non voglia rubare la mia identità, probabilmente vorrai sostituire la foto con una tua immagine. Puoi anche rimuoverla facoltativamente.

Poiché stiamo usando un widget di WordPress, il markup esterno è già generato per noi. Questo è ciò che è in totale.

<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>

Se stai facendo questo su un sito HTML grezzo, avrai bisogno di un qualche tipo di wrapper (come questo è l'aside) per la casella a discesa bio con qualcos'altro al suo interno, altrimenti non c'è nulla su cui passare il mouse per farla apparire.

Esempio reale: La mia casella a discesa bio è all'interno di un tag li nel mio menu di navigazione.

Prime due righe di CSS

Le prime due righe impostano davvero il resto, quindi le ho messe nella loro sezione.

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

Spiegazione

• Prima riga: Impostiamo il wrapper della casella a discesa bio con posizionamento relativo. Questo rende più facile posizionare assolutamente la casella a discesa bio vicino al wrapper originale.
• Seconda riga: Questo rende essenzialmente invisibile la casella a discesa bio per impostazione predefinita. Dovrebbe apparire solo quando passi il mouse sopra qualcosa, ricordi?

Nota: Se non ti piace display: none; o pensi che danneggi la tua SEO o qualcosa del genere, puoi anche usare qualcosa come position: absolute; left: -100000em; che la sposterà così lontano dalla pagina che nessuno la vedrebbe comunque.

Il resto del CSS

Il seguente codice CSS gestisce l'aspetto della casella a discesa bio.

#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;
}

Spiegazione

Questo è dove usiamo finalmente il selettore #text-3 insieme alla pseudoclasse :hover per far apparire il box a discesa della biografia solo quando passi il mouse sopra il widget di testo.

• Prima riga: display: block; rende visibile il box a discesa della biografia. z-index: 99; assicura che il box venga visualizzato sopra tutto il resto, senza ostacoli.
• Seconda riga: Questo posiziona il box sotto l'aside a circa 25 pixel.
• Terza riga: Questi sono solo alcuni stili cosmetici, impostano lo sfondo su un grigio chiaro con un padding decente.
• Quarta riga: Questa è tutta tipografia autoesplicativa.

Nota: Riguardo alla prima riga, se stai usando la tecnica position: absolute; left: -100000em; invece di display: none; come ho spiegato sopra, usare display: block qui non sarebbe necessario (dato che i div sono già considerati elementi di livello block comunque). Invece dovresti usare left: 0; per riportare il div sulla pagina.

E per l'immagine, solo un semplice float e margine destro.

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

Integrazione WordPress

Non riesco a pensare a un buon modo per integrare questo in un menu dinamico di WordPress (wp_nav_menu) senza filtrare un sacco di cose. Il modo più semplice potrebbe essere quello di codificare manualmente la tua navigazione e fartene una ragione (cosa che faccio su tutti i miei siti).

Se hai tecniche su come inserire markup in una voce di menu di WordPress, che è necessaria per questo, mi piacerebbe sentirle nei commenti. Sono sicuro che sia possibile ma va oltre lo scopo di questo post sui suggerimenti CSS.

Conclusione

Sì, mi rendo conto che probabilmente non vorresti mettere un box a discesa della biografia nella tua barra laterale, lo metteresti in un posto con spazio limitato che non ha spazio per essere visualizzato completamente (come una barra di navigazione angusta).

Fortunatamente, puoi usare questa tecnica praticamente ovunque. Volevo solo esaminare una tecnica di base su come visualizzare un intero div al passaggio del mouse.

Non è troppo complicato e non hai bisogno di alcun elaborato script Javascript per farlo, anche se se volessi un effetto di dissolvenza high-tech, probabilmente dovresti usare un po' di Javascript.