# 88: Costruire il Gallery Bar - Trucchi CSS

Anonim

Abbiamo iniziato a costruire la barra sotto l'intestazione della galleria. Questo bar ha un bel lavoro. Racconta alle persone dove si trovano e cosa stanno visualizzando (breadcrumb, in modo semplice). Conterrà anche l'impaginazione, un pulsante e tutto il tempo deve essere reattivo.

Questo è l'inizio di quella che chiamiamo navigazione "barra nera" che diventa davvero una cosa per il resto del design dei siti.

Scriviamo il markup per la barra, incluso l'utilizzo del nostro carattere dell'icona quando necessario per la freccia giù nel menu a discesa. È facile fare riferimento rapidamente alla tabella dei caratteri in Font Explorer X per ottenere il valore che può essere l'icona HTML.

Usiamo la wp_tag_cloud()funzione per sputare sulla pagina un elenco di tag dalla nostra tassonomia personalizzata per la galleria. Diamo semplicemente uno stile al markup in modo che si comporti come un menu a discesa. Scriviamo solo un tocco di JavaScript per mostrare / nascondere questo menu a discesa. Come abbiamo fatto in passato con la navigazione principale del sito, tutto ciò che facciamo è cambiare il nome di una classe con JavaScript e lasciare che il CSS faccia il lavoro.

Alla fine abbiamo un menu a discesa funzionante per la Galleria, il che è carino. È davvero il cavallo di battaglia della navigazione nella Galleria.