Como Criar Uma Caixa Suspensa Bio Com CSS

Depois que lancei o redesign mais recente do Theme Lab, recebi vários comentários sobre a caixa de “menu suspenso de bio” que tenho na minha barra de navegação. Eu a codifiquei com apenas algumas linhas de CSS junto com uma imagem de fundo.

Neste post de dicas de CSS, explicarei como você pode ter um efeito de hover semelhante em seus próprios sites.

O Exemplo

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

Basicamente, ao passar o mouse sobre a div que contém o widget, uma div “oculta” aparecerá, que será nossa caixa suspensa de bio.

Observe na imagem à esquerda, a caixa de bio cinza não aparecerá a menos que você passe o mouse sobre a div que contém o título “Bio Hover”.

O Seletor

Não é muito importante ter um seletor CSS exclusivo para estilizar a div onde você deseja colocar sua caixa suspensa de bio. Basicamente, isso ocorre porque, se você não tiver a marcação correspondente nessa div, nada aparecerá de qualquer maneira em caso de estado de hover.

Embora no caso do Twenty Eleven, pudéssemos nos safar apenas estilizando a classe “aside”, é provável que você queira uma caixa suspensa de bio em apenas uma de suas divs de qualquer maneira, então seremos mais específicos.

Felizmente, com o WordPress, ele gera um monte de seletores CSS exclusivos que você pode usar. Neste exemplo, ele gera #test-3, que usaremos a partir de agora.

Observação: Isso pode variar dependendo da sua instalação do WordPress. Use algo como as Ferramentas do Desenvolvedor do Chrome para encontrar facilmente o seletor.

Marcação HTML

Neste exemplo, a marcação HTML pode ser colocada diretamente no widget de texto do WordPress. É isso que você colocaria:

<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 menos que você queira roubar minha identidade, provavelmente vai querer substituir a foto por uma foto sua. Você também pode removê-la opcionalmente.

Como estamos usando um widget do WordPress, a marcação externa já é gerada para nós. É isso que é no total.

<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 você estiver fazendo isso em um site HTML puro, precisará de algum tipo de contêiner (como este é o aside) para o menu suspenso de biografia com algo mais dentro dele, caso contrário, não haverá nada sobre o qual pairar para que ele desça.

Exemplo da vida real: Minha div do menu suspenso de biografia está dentro de uma tag li no meu menu de navegação.

Primeiras Duas Linhas de CSS

As duas primeiras linhas realmente preparam o resto, então eu coloquei isso em sua própria seção.

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

Explicação

• Primeira linha: Definimos o contêiner do menu suspenso de biografia para ter posicionamento relativo. Isso facilita o posicionamento absoluto da caixa do menu suspenso de biografia mais perto do contêiner original.
• Segunda linha: Isso essencialmente torna a caixa do menu suspenso de biografia invisível por padrão. Ela só deve aparecer quando você paira sobre algo, lembra?

Observação: Se você não é fã de display: none; ou acha que isso prejudica seu SEO ou algo assim, você também pode usar algo como position: absolute; left: -100000em; que basicamente a moverá tão longe da página que ninguém a verá de qualquer maneira.

O Resto do CSS

O código CSS a seguir lida com a aparência da caixa do menu suspenso de biografia.

#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ção

É aqui que finalmente usamos o seletor #text-3 junto com a pseudoclasse :hover para fazer a caixa do menu suspenso de biografia aparecer apenas quando você paira sobre o widget de texto.

• Primeira linha: O display: block; torna a caixa do menu suspenso de biografia visível. O z-index: 99; garante que a caixa será exibida sobre tudo mais, sem obstruções.
• Segunda linha: Isso posiciona a caixa abaixo do aside em cerca de 25 pixels.
• Terceira linha: Estes são apenas alguns estilos cosméticos, definindo o fundo para um cinza claro com preenchimento decente.
• Quarta linha: Isso é tudo tipografia autoexplicativa.

Observação: Sobre a primeira linha, se você estiver usando a técnica position: absolute; left: -100000em; em vez de display: none; como expliquei acima, usar display: block aqui não seria necessário (já que os divs já são considerados elementos de nível de bloco de qualquer maneira). Em vez disso, você teria que usar left: 0; para trazer o div de volta para a página.

E para a imagem, apenas um simples float e margem direita.

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

Integração com WordPress

Não consigo pensar em uma boa maneira de integrar isso a um menu dinâmico do WordPress (wp_nav_menu) sem filtrar excessivamente algo. A maneira mais fácil pode ser codificar sua navegação manualmente e aceitar (o que eu faço em todos os meus sites).

Se você tiver alguma técnica sobre como inserir marcação em um item de menu do WordPress, o que é necessário para isso, adoraria saber nos comentários. Tenho certeza de que é possível, mas vai além do escopo deste post de dica de CSS.

Conclusão

Sim, percebo que você provavelmente não gostaria de colocar um menu suspenso de biografia na sua barra lateral, você o colocaria em um lugar com espaço limitado que não tem espaço para ser totalmente exibido (como uma barra de navegação apertada).

Felizmente, você pode usar esta técnica em praticamente qualquer lugar. Eu só queria abordar uma técnica básica sobre como exibir um div inteiro ao passar o mouse.

Não é muito complicado e você não precisa de nenhum script Javascript sofisticado para fazer isso, embora se você quisesse algum efeito de fade de alta tecnologia, provavelmente teria que usar algum Javascript.