Come creare una casella a discesa Bio con CSS

Dopo aver rilasciato il riprogettazione più recente di Theme Lab, Ho avuto un certo numero di commenti sulla casella “menu a discesa bio” che ho nella mia barra di navigazione. L’ho codificato con poche righe di CSS insieme a un’immagine di sfondo.


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

L’esempio

In questo esempio, userò un widget di testo in Venti undici tema, il nuovo predefinito a partire da WordPress 3.2.

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

Nota nell’immagine a sinistra, la casella bio grigia non apparirà a meno che non passi il div contenente l’intestazione “Bio Hover”.

Il selettore

Non è così importante avere un selettore CSS unico per modellare il div in cui vuoi inserire la tua casella a discesa bio. Fondamentalmente questo è perché se non hai il markup di accompagnamento in quel div, nulla verrebbe comunque visualizzato in caso di uno stato al passaggio del mouse.

Anche se nel caso di Twenty Eleven, potremmo cavarcela solo con lo stile della classe “a parte”, è probabile che tu voglia solo una casella a discesa bio su uno dei tuoi div comunque, quindi diventeremo più specifici.

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

Nota: Questo può variare a seconda dell’installazione di WordPress. Utilizza 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 WordPress. Questo è ciò che hai inserito:

Leland!

Ciao. Sono Leland Fiegel e sono il creatore e fondatore di Theme Lab. Adoro scrivere codice, in particolare HTML, CSS e WordPress.

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

Poiché stiamo utilizzando un widget WordPress, il markup esterno è già generato per noi. Questo è quello che è in totale.

Bio Hover

Leland!

Ciao. Sono Leland Fiegel e sono il creatore e fondatore di Theme Lab. Adoro scrivere codice, in particolare HTML, CSS e WordPress.

Se lo stai facendo su un sito HTML non elaborato, avrai bisogno di una sorta di wrapper (come questo a parte) per il menu a discesa bio con qualcos’altro al suo interno, altrimenti non c’è nulla su cui passare sopra.

Esempio di vita reale: Il mio div dropdown bio è all’interno di un tag li nel mio menu di navigazione.

Prime due righe di CSS

Le prime due righe hanno impostato il resto, quindi l’ho inserito nella sua sezione.

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

Spiegazione

  • Prima linea: Impostiamo il wrapper del menu a discesa bio per avere un posizionamento relativo. Ciò semplifica il posizionamento assoluto della casella a discesa bio più vicino all’involucro originale.
  • Seconda linea: Questo essenzialmente rende la casella a discesa bio invisibile per impostazione predefinita. Dovrebbe apparire solo quando passi il mouse su qualcosa, ricorda?

Nota: Se non sei un fan del display: nessuno; o pensi che danneggi il tuo SEO o qualcosa del genere, puoi anche usare qualcosa lungo le linee di posizione: assoluto; a sinistra: -100000em; che sostanzialmente lo sposterà così lontano dalla pagina, nessuno lo vedrebbe mai comunque.

Il resto del CSS

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

# text-3: hover .bio-dropdown {
blocco di visualizzazione; indice z: 99;
posizione: assoluta; sopra: 25px;
sfondo: #ccc; imbottitura: 10px 10px 0 10px;
dimensione carattere: 11px; altezza della linea: 18 px; colore: # 666;
}

Spiegazione

Qui è dove finalmente usiamo il selettore # text-3 insieme alla pseudoclass: hover per far apparire la casella a discesa bio solo quando passi con il mouse sopra il widget di testo.

  • Prima linea: Il display: blocco; rende visibile la casella a discesa bio. L’indice z: 99; assicura che la casella venga visualizzata su tutto il resto, senza ostacoli.
  • Seconda linea: Questo posiziona la casella sotto il lato di circa 25 pixel.
  • Terza riga: Questi sono solo alcuni stili cosmetici, che impostano lo sfondo su un grigio chiaro con un’imbottitura decente.
  • Quarta riga: Questa è tutta una tipografia autoesplicativa.

Nota: Per quanto riguarda la prima riga, se stai utilizzando la posizione: assoluta; a sinistra: -100000em; tecnica invece di display: nessuna; come ho spiegato sopra, usando display: il blocco qui non sarebbe necessario (dal momento che i div sono già considerati elementi a livello di blocco). Invece dovresti usare left: 0; per spostare nuovamente il div sulla pagina.

E per l’immagine, solo un semplice galleggiante e il margine giusto.

.bio-dropdown .photo {float: left; margine destro: 10px; }

Integrazione di WordPress

Non riesco a pensare a un buon modo per integrarlo in un menu WordPress dinamico (wp_nav_menu) senza filtrare la merda da qualcosa. Il modo più semplice potrebbe essere quello di codifica la tua navigazione e superala (cosa che faccio su tutti i miei siti).

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

Conclusione

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

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

Non è troppo complicato e non hai bisogno di alcuna roba Javascript elegante per farlo, anche se se volessi un effetto di dissolvenza ad alta tecnologia, probabilmente dovresti usare un po ‘di 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