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:
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