Menu com abas escondidas
Bom, antes de mais nada, dê uma olhadinha no exemplo
aqui. Gostou? Quer fazer um igual? Então mãos a obra e preste atenção nos passos abaixo!
1º Cole os códigos abaixo no CSS:
#menu{margin:2px;text-align:center;display:inline-block;width:auto;
color: #8b6182;font-size: 10px;border-radius:1px;font:bold italic 14px georgia;
text-shadow: 0 1px 1px #fff;padding:2px;background: #f4e3ed;padding:5px;}
Esse é a primeira parte. Sabe essa parte aqui:
É a parte que este código modifica. Modifique-o como preferir.
2º É a parte que quando passa o mouse, mostra-nos o conteúdo daquela página.
Cole este código abaixo do mostrado anteriormente:
#submenu{position:absolute;margin-top:0px;opacity:1;margin-left:0px;
width:100px;overflow:hidden;height:0px;-webkit-transition-duration: .50s;background: #f4e3ed;}
#submenu a{font:bold italic 12px georgia;text-shadow: 0 1px 1px #fff; text-align:center;display:block;line-height:15px;padding:3px; color:#a6677d;-webkit-transition-duration: .50s;background: #f4e3ed;}
#submenu a:hover{border-bottom:2px solid #f0e9ef;padding:3px; background:#f9f4f7;-webkit-transition-duration: .50s;border-radius:5px 15px 15px 15px ;background: #f4e3ed;}
Modifique-os como quiser. Lembrando: o "submenu a" é onde estar os códigos em relação a fonte etc, se você quiser mudar a cor, ou até mesmo a fonte, o tamanho da fonte, é lá que você mudará. No "submenu a:hover" é a mesma coisa, porém o hover só aparece quando se passa o mouse em cima. Entenderam? Tudo o que tiver hover, é porque só aparece se passar-se o mouse por cima.
Observação: o background (fundo) dos códigos dos passos 1º, 2º e 3º devem ser de preferência da mesma cor, para não fugir da harmonia.
3º é a parte que faz este "movimento":
Cole este código:
#menu:hover #submenu {opacity:1;overflow:hidden;z-index:10;height:auto;
margin-top:1px;-webkit-transition-duration: .50s;border-radius:5px 15px 15px 15px ;border-bottom:1px solid #fff;background: #f4e3ed;}
Você pode mudar o tamanho, a cor, tudo o que você quiser, do jeito que você quiser.
4º Coloque este código também em seu CSS:
#posicao {overflow: hidden;width:600px;margin-right: auto;
margin-left: auto;margin-top: -10px;margin-bottom:auto;}
Este código é a posição do seu menu entendeu? Você pode colocar a posição que quiser.
Agora, depois de <body>, coloque isto:
<div id="posicao"></div>
5º Agora cole este código depois do código anterior:
<div id="menu"><a href="http://NOMEDOSEUTUMBLR.tumblr.com/">Home</a></div>
<div id="menu"><a>About</a>
<div id="submenu">
<span onClick="changeNavigation('01')"><a>Me</a></span>
<span onClick="changeNavigation('02')"><a>Blog</a></span>
</div></div>
<div id="menu"><a>Contato</a>
<div id="submenu">
<a href=" http://NOMEDOSEUTUMBLR.tumblr.com/ask ">Ask</a>
<a href=" http://NOMEDOSEUTUMBLR.tumblr.com/submit ">Submit</a>
</div></div>
<div id="menu"><a href="http://NOMEDOSEUTUMBLR.tumblr.com/tagged/SUATAG" />Textos</a></div>
</div>
Observação: Sempre quando tiver "submenu" é porque terá aquele truque de passar o mouse e aparecer na aba, outras abas com o conteúdo. Faça quantas abas quiser, coloque o que quiser. Bem, é isso. Bem simples não? Só precisa ter atenção. Caso tenha alguma dúvida sobre esse tutorial, fale conosco e tire sua dúvida.
(Ale)Marcadores: menu
Postado por I Love HTML. 09:28.
3 Comentários:
Lindo!
Que bom que gostou anjo >< /dan
amores, eu nao estou conseguindo fazer com que ele fique reto como no exemplo. o meu ta ficando um em cima do outro '~' o que eu faço?
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