Menu Hover (igual ao nosso)
Gente é bem fácil de fazer. Seguinte...
- Você tem que criar o seu menu em algum programa de edição, sendo que cada item do menu você terá que fazer de duas formas diferentes, veja o meu como exemplo:
e
- Viu ? a cor das letras são diferentes.
-Então, crie seu menu e eles tem que ficar com o
MESMO TAMANHO se não fica errado.
- Depois do menu feito e salvo, faça upload das imagens.
- Copie o código abaixo no seu CSS:
.01{background: url('LINK DA SUA IMAGEM 01');width:LARGURApx; height:ALTURApx;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;display:inline-block;}
.01:hover {background: url('LINK DA SUA IMAGEM 02');-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
Esse
01 é o
HOME.
.02{background: url('LINK DA SUA IMAGEM 01');width:LARGURApx; height:ALTURApx;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;display:inline-block;}
.02:hover {background: url('LINK DA SUA IMAGEM 02');-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
Esse
02 é o
ABOUT.
.03{background: url('LINK DA SUA IMAGEM 01');width:LARGURApx; height:ALTURApx;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;display:inline-block;}
.03:hover {background: url('LINK DA SUA IMAGEM 02');-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
Esse
03 é o
BLOG.
- Vá até onde você irá colocar o menu e coloque o código abaixo:
<a href="/" class="01"></a>
<span onClick="changeNavigation('about')" class="02"></span>
<span onClick="changeNavigation('blog')" class="03"></span>
Está feito.
OBS: Esse foi apenas o inicio do menu criado, se você quiser colocar CONTATO e outros, você terá que fazer todo o processo novamente, criar as imagens, copiar o código que vai ser 04 e assim sucessivamente.
by
Fran
Postado por I Love HTML. 00:54.
0 Comentários:
Postar um comentário
- Elogie, critique, mas faça isso com educação.
- Se seu comentário estiver com palavrões de baixo calão será excluído.
Assinar Postar comentários [Atom]
<< Página inicial