# 88: Construindo o Gallery Bar - CSS-Tricks

Anonim

Começamos a construir a barra abaixo do cabeçalho da galeria. Este bar tem um trabalho e tanto. Diz às pessoas onde estão e o que estão a ver (migalhas de pão, de uma forma simples). Ele também conterá paginação, um botão e o tempo todo precisa ser responsivo.

Este é o início do que chamamos de navegação de “barra preta”, que realmente se torna uma coisa para o resto do design dos sites.

Escrevemos a marcação para a barra, incluindo o uso de nossa fonte de ícone quando necessário para a seta para baixo no menu suspenso. É fácil consultar rapidamente o gráfico de caracteres no Font Explorer X para obter o valor que o ícone HTML pode ter.

Usamos a wp_tag_cloud()função para cuspir na página uma lista de tags de nossa taxonomia personalizada para a galeria. Simplesmente estilizamos a marcação para se comportar como um menu suspenso. Escrevemos apenas um toque de JavaScript para mostrar / ocultar este menu suspenso. Como fizemos no passado com a navegação principal do site, tudo o que fazemos é alterar o nome de uma classe com o JavaScript e deixar o CSS fazer o trabalho.

No final, temos um menu suspenso funcional para a Galeria, o que é bom. É realmente o carro-chefe da navegação na Galeria.