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 Falso I-frame.
Menu mais usado nos nossos themes, vou ensiná-los a fazer:

1- Copie o código abaixo e cole acima da tag :

<script type="text/javascript">
function changeNavigation(id) {document.getElementById('ilh').innerHTML=document.getElementById(id).innerHTML}
</script>

2- Vá até {block:posts} e coloque acima dele isso:

<div id="ilh">

3- Vá até {/block:posts} e coloque abaio dele isso:

<span onClick="changeNavigation('01')">Menu 01</span>
<span onClick="changeNavigation('02')">Menu 02</span>
<span onClick="changeNavigation('03')">Menu 03</span>
<span onClick="changeNavigation('04')">Menu 04</span>

OBS: Caso queira mais abas no menu copie o primeiro código e mude onde está 01, no caso você irá colocar 05, e assim vai indo.

5- Vá acima de e coloque esse código:

<div id="01" style="display:none">
<div class="box">
Conteúdo do I Frame aqui :) 01
</div></div>

<div id="02" style="display:none">
<div class="box">
Conteúdo do I Frame aqui :) 02
</div></div>

<div id="03" style="display:none">
<div class="box">
Conteúdo do I Frame aqui :) 03
</div></div>

<div id="04" style="display:none">
<div class="box">
Conteúdo do I Frame aqui :) 04
</div></div>

OBS: se você tiver colocado mais abas no menu la em cima, copie o primeiro código e substitua 01 por 05 e assim por diante.

ESTÁ PRONTINHO ! agora.. Se você quiser o menu com aquele botão que sempre usamos terá que acrescentar umas coisinhas:

1- Vá no CSS e coloque isso:

.menuporfran {background:#e4e4e4; color:#555; padding: 5px; margin:1px; text-align:center; font-size:12px; font-family:verdana; widht:70px;}

- Vamos entender o código: background- cor do fundo. color- cor da letra. font-size:tamanho da letra. font-family- fonte que você quer usar. widht- tamanho do botão.

2- Volte la no código do I frame e acrescente isso:

class="menuporfran"

Exemplo: (Ficará assim)

<span onClick="changeNavigation('01')" class="menuporfran">Menu 01</span>

Agora sim está prontinho, faça isso em todas as abas do seu menu :)

Créditos: Fran Keynes. Se usar credite :)

Postado por I Love HTML. 10:13. 5 Comentários


5 Comentários:

Às 10 de março de 2012 15:17 , Anonymous Andressa Yara disse...

Parabéns meninas ! Eu tava fazendo um theme aqui esse foi o único tutorial de menu falso iframe que deu certo aqui ! Obrigada :]

 
Às 5 de maio de 2012 23:02 , Blogger I Love HTML disse...

aawn que bom amor. de nada *-* /fran

 
Às 20 de maio de 2012 20:43 , Blogger ₢ris disse...

Teria como fazer isso no blogger?

 
Às 17 de dezembro de 2012 09:03 , Blogger Cleison de Oliveira Padilha disse...

depois que eu acesso um falso iframe, tem como eu colocar um link que "feche" o iframe e volte pra tela anterior sem ter q recarregar a página?

 
Às 20 de maio de 2014 11:20 , Blogger Nathalia Nates disse...

como eu passo isso para o blogger amr?

 

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