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)
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:
Parabéns meninas ! Eu tava fazendo um theme aqui esse foi o único tutorial de menu falso iframe que deu certo aqui ! Obrigada :]
aawn que bom amor. de nada *-* /fran
Teria como fazer isso no blogger?
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?
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