WordPress Como fazer um menu animado para Wordpress

[Natália Freitas]

Oi gente, boa noite! Tudo na paz? Não tenho certeza se esse é o tópico certo, mas vamos lá. Estou criando um blog no wordpress.org e eu gostaria de fazer um menu animado e interativo na página home. Me disseram que talvez precisaria usar CSS para fazer ele, mas foi o máximo que encontrei. A referência de menu que eu gostaria de fazer está nesses sites:

 

https://christianvoltz.com (principalmente esse, com menus animados quando passa o mouse em cima)

www.davemckean.com (se rolasse fazer algo estático assim já seria legal também)

 

Alguém poderia me dar uma luz sobre como posso pesquisar mais sobre, algum tutorial, qualquer coisa?

Desde já, agradeço a atenção!

[assinante]

@Natália Freitas Você vai precisar de uma imagem em cover com altura relativa aos 100% da página! Sobre estilização, eu faria desta forma abaixo:

<a href="link" class="img parte1"></a>
<a href="link" class="img parte2"></a>
<a href="link" class="img parte3"></a>

.img {
   display: block;
   background-image:url(/images/img.jpg);
   width:200px;  /* Tamanho das partes 200x200 */
   height:200px;
}

.parte1 {
  background-position: x y; // posicione x, y de acordo com sua necessidade 
}

.parte2 {
   background-position: x y; // posicione x, y de acordo com sua necessidade
}

.parte3 {
   background-position: x y; // posicione x, y de acordo com sua necessidade 
}

Brincando com position e links na minha opinião fica perfeito, se quiser melhorar pode usar javascript para capturar o click em determinada coordenada de sua imagem e fazer uma ação de link também! tem várias alternativas! Boa sorte, espero ter esclarecido

[Natália Freitas]

@assinante Uau! Muito obrigada! Vou fazer o mapeamento da minha imagem e tentar algo assim ^^

[Thiago Maycon]

 

 

Só mais uma ajuda @Natália Freitas