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

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.

É 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.


é 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.

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>

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:


Postado por I Love HTML. 09:28. 3 Comentários


3 Comentários:

Às 30 de junho de 2012 16:22 , Blogger Tudo de Html disse...

Lindo!

 
Às 17 de julho de 2012 11:22 , Blogger I Love HTML disse...

Que bom que gostou anjo >< /dan

 
Às 25 de janeiro de 2013 13:03 , Anonymous Anônimo disse...

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