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 topo (estilo blog)
Veja como é que vai ficar Aqui. Gostou ? Quer fazer ? Então siga os passos !1- Cole os códigos abaixo em seu CSS:
Esse primeiro é o código do menu, mude tudo que desejar, menos padding ok ?
.menuilh01{float:left;padding:6px;text-align:center; height:auto;width:auto;margin-left:2px;cursor:pointer;webkit-transition-duration: .90s;font:italic 15px georgia;background:#b3a2c9;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;text-shadow: 0 1px 1px #8f7ca8;}
.menuilh{float:left;padding:6px;text-align:center; height:auto;width:auto;margin-left:2px;cursor:pointer;webkit-transition-duration: .90s;font:italic 15px georgia;background:transparent;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;text-shadow: 0 1px 1px #b3a2c9;}
.menuilh:hover{float:left;padding:6px;text-align:center; height:auto;width:auto;margin-left:2px;cursor:pointer;webkit-transition-duration: .90s;font:italic 15px georgia;background:#b3a2c9;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;text-shadow: 0 1px 1px #8f7ca8;}O código abaixo é da linha lilás atrás do menu, mude as cores e top se quiser.
.cimailh {background:#e9e2f3;position:fixed;width:100%; height:30px;float:left;top:5px; left:0px;z-index:101; border-top:5px solid #b3a2c9;border-bottom:5px solid #b3a2c9;}Esse código é o código que faz o menu ficar em cima, la no topo. Se seu menu ficar muito para a esquerda mexa em margin-left no menucimailh2 ok ?
.menucimailh {left:; top:10px; position:fixed; width:auto;background-color:transparent; height:auto; position: absolute!important;z-index:105;}
.menucimailh2{margin-left:0px;}- Vamos entender: o código menuilh01 e o menuilh:hover tem que ser SEMPRE iguais, cores e tudo mais.
- Agora vá depois de <body> e coloque isso:
<div class="cimailh"></div>
- Agora vá depois do código de deixar o theme centralizado (se você tiver, caso contrário coloque depois de <body> também):
- Se seu menu for de LINKS coloque esse código:
<div class="menucimailh"><div class="menucimailh2"> <a href="LINK" class="menuilh01"><div style="color:#ffffff;">LINK 01</div></a> <a href="/LINK" class="menuilh"><div style="color:#ffffff;">LINK 02</div></a> <a href="/LINK" class="menuilh"><div style="color:#ffffff;">LINK 03</div></a> <a href="/LINK" class="menuilh"><div style="color:#ffffff;">LINK 04</div></a> <a href="/LINK" class="menuilh"><div style="color:#ffffff;">LINK 05</div></a> <a href="/LINK" class="menuilh"><div style="color:#ffffff;">LINK 06</div></a> </div></div>- Se seu menu for I-FRAME coloque esse código:
<div class="menucimailh"><div class="menucimailh2">
<span onClick="changeNavigation('01')" class="menuilh01"><div style="color:#fff;">LINK</div></span>
<span onClick="changeNavigation('02')" class="menuilh"><div style="color:#fff;">LINK</div></span>
<span onClick="changeNavigation('03')" class="menuilh"><div style="color:#fff;">LINK</div></span>
<span onClick="changeNavigation('04')" class="menuilh"><div style="color:#fff;">LINK</div></span>
<span onClick="changeNavigation('05')" class="menuilh"><div style="color:#fff;">LINK</div></span>
<span onClick="changeNavigation('06')" class="menuilh"><div style="color:#fff;">LINK</div></span>
</div></div>OBSERVE: Sempre no primeiro link do menu a class é menuilh01 e nos outros a class é menuilh. Em color você coloca a cor da letra que você quer, ali está branco ok ? Bom ajeite o menu e tudo que quiser e está feito :) /fran
Postado por I Love HTML. 21:12.
4 Comentários
4 Comentários:
O texto do menu não está fixo, pode me ajudar?
claro amor, me mostra seu tumblr /fran
Esse menu é só para tumblr?
O menu é so para Tumblr ? O que é CSS ? Pode colocar em Blogger ? Poderia fazer um Tuto de Video pfvr ?
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