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 Lavalamp.
ATENÇÃO: OS CÓDIGOS FORAM RETIRADOS DO WWW.COISINHASMIL.COM MAS, EDITADOS POR MIM FRAN, E O TUTORIAL FOI FEITO POR MIM.

- Vamos começar, coloque o código abaixo depois de <head>:

CÓDIGO

OBS: CASO, NO FINAL DE TODO O PROCESSO O MENU NÃO FUNCIONAR APAGUE O CÓDIGO ACIMA E SUBSTITUA POR ESSE. Colocando-o abaixo de <head>:

CÓDIGO (código por Marissa/onemoredream)

- Agora coloque o código abaixo no seu CSS:

CÓDIGO

OBS: No código acima voce só pode modificar algumas coisas:


.lavaLamp: voce só pode mudar a width: 300px; e o background:#fff;

.lavaLamp li.back: você só pode mudar o background:#EEE;

.lavaLamp li.back .left: você só pode mudar o background (ele deve ser da mesma cor que o de cima) background:#EEE;

.lavaLamp li a: voce só pode mudar font-family:verdana; font-size:11px; color:#888;

.lavaLamp li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited: você só pode mudar a cor da Letra que é rosa em color:#F49DB8;


- Agora coloque onde quer que o menu apareça isso:

Se seu menu for de links:

<ul class="lavaLamp">

<li><a href="LINK">LINK</a></li>

<li><a href="LINK">Link</a></li>

<li><a href="LINK">Link</a></li>

<li><a href="LINK">Link</a></li>

<li><a href="LINK">Link</a></li>

<li><a href="LINK">Link</a></li>

</ul>


Se seu menu for falso iframe:


<ul class="lavaLamp">
<li><span onClick="changeNavigation('01')"><a> Menu 01 </a></span></li>
<li><span onClick="changeNavigation('02')"><a> Menu 01 </a></span></li>
<li><span onClick="changeNavigation('03')"><a> Menu 01 </a></span></li>
<li><span onClick="changeNavigation('04')"><a> Menu 01 </a></span></li>
<li><span onClick="changeNavigation('05')"><a> Menu 01 </a></span></li>

</ul>


Se seu menu for pop up:


<ul class="lavaLamp">

<li><a href="#?w=500" class="poplight"> Link 1</a></li>
<li><a href="#?w=500" class="poplight"> Link 2</a></li>
<li><a href="#?w=500" class="poplight"> Link 3</a></li>
<li><a href="#?w=500" class="poplight"> Link 4</a></li>
<li><a href="#?w=500" class="poplight"> Link 5</a></li>

</ul>


Se for útil e voce usar, credite a coisinhas mil e a nós por termos feito esse tutorial e por ter arrumado alguns códigos :) OBG

Postado por I Love HTML. 19:36. 2 Comentários


2 Comentários:

Às 25 de novembro de 2014 às 20:32 , Blogger Unknown disse...

obg amr <3 vc me ajudou muito <3

 
Às 11 de março de 2015 às 19:08 , Blogger Mari Bahana disse...

Ótima Postagem!

 

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