Menu com abas escondidas
Autor: I Love HTML | Publicado: 2012-06-15T09:28:00-07:00

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 &lt;body&gt;, coloque isto:
&lt;div id="posicao"&gt;&lt;/div&gt;
5º Agora cole este código depois do código anterior:
&lt;div id="menu"&gt;&lt;a href="http://NOMEDOSEUTUMBLR.tumblr.com/"&gt;Home&lt;/a&gt;&lt;/div&gt;

&lt;div id="menu"&gt;&lt;a&gt;About&lt;/a&gt;

&lt;div id="submenu"&gt;
&lt;span onClick="changeNavigation('01')"&gt;&lt;a&gt;Me&lt;/a&gt;&lt;/span&gt;
&lt;span onClick="changeNavigation('02')"&gt;&lt;a&gt;Blog&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;div id="menu"&gt;&lt;a&gt;Contato&lt;/a&gt;

&lt;div id="submenu"&gt;
&lt;a href="&nbsp;http://NOMEDOSEUTUMBLR.tumblr.com/ask&nbsp;"&gt;Ask&lt;/a&gt; 
&lt;a href=" http://NOMEDOSEUTUMBLR.tumblr.com/submit&nbsp;"&gt;Submit&lt;/a&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;div id="menu"&gt;&lt;a href="http://NOMEDOSEUTUMBLR.tumblr.com/tagged/SUATAG" /&gt;Textos&lt;/a&gt;&lt;/div&gt;

&lt;/div&gt;
Observação:&nbsp;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)