Olá sejam muito bem vindos ao ilovehtml. Estamos de volta e de cara nova, tanto aqui, quanto no nosso blog. Gostariamos de agradecer todo carinho dos nossos seguidores. Hoje composto por quatro moderadoras o ilovehtml quer se tornar um dos melhores meios sobre HTML por aqui, esperamos surpreender vocês com tutoriais novos, themes novos, tudo novo. Em breve vamos estar criando promoções ou outra coisa, para poder prestigiar os nossos queridos seguidores, fiquem ligados nas novidades por aqui.
Em breve novas parcerias, fique ligado.
Você é livre para fazer suas escolhas, mas é prisioneiro das consequências. - Pablo Neruda
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
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