Home Questions Themes Extras Tutorials
Menu Hover:

É mais ou menos o menu que eu estou usando, quando você passa o mouse ele muda, você pode fazer várias coisas diferentes com ele:

image

1- Primeiro, faça as 2 imagens no seu photoshop, a imagem dele normal e a imagem que aparecerá quando passarem o mouse.
image  image

2- Pra facilitar, faça as duas imagens do mesmo tamanho, não se preocupe se sobrar espaço em uma delas. Deixe o fundo transparente de preferência. Ao salvar a sua imagem, descubra o tamanho dela (clique com o botão direito e olhe nas propriedades).
3- Copie o código abaixo e cole no seu CSS, ou seja, em qualquer lugar entre <style> e </style>

.youmakemenu{float:left; height:ALTURA DA SUA IMAGEMpx;width:LARGURA DA SUA IMAGEMpx;margin:1px;-webkit-transition-duration: .90s; background:url('URL DA PRIMEIRA IMAGEM');}
.youmakemenu:hover {float:left; height:ALTURA DA SUA IMAGEMpx;width:LARGURA DA SUA IMAGEMpx;margin:1px;-webkit-transition-duration: .90s; background:url('URL DA SEGUNDA IMAGEM');}

4- Agora, use os seguintes códigos onde quer que o menu apareça.
Para links:

<a href="LINK" class="youmakemenu"></a>

Para falso-iframe:

<span onClick="changeNavigation('ID DO FALSO IFRAME')" class="youmake2"></span>

Para cada aba do menu você terá que repetir todo o tutorial.
- Tutorial por Luana (YouMakeMeCrazierBaby)
Não reblogue ou copie. Qualquer desrespeito as regras será denunciado sem aviso prévio.



Página 1 de 1