I Love HTML

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.

novas actions para vocês, clique e veja

como criar uma action ? aprenda aqui

menu igual ao nosso, veja como fazer

paleta de cores novinhas pra vocês

seja um parceiro do ilovehtml

games, games e muito mais games

avatares simples e bonitos

styles para o seu photoshop

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!

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