Se você não gosta de pop-up, assim como eu, aqui vou ensiná-los como transformá-lo no menu falso i-frame. Preste bem atenção porque NÃO VOU TIRAR NENHUMA DÚVIDA SOBRE ISSO NA ASK.
Vá no seu HTML e ache o seguinte código e apague-o:
<script>
$(document).ready(function() {
//
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://static.tumblr.com/mpornxv/YYVlk9rko/close_by_marissa.png" class="btn_close" title="Fechar" alt="Close" /></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=10)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=10)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
Apagou? Agora, apague o seguinte código no seu CSS:
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: fixed url('http://static.tumblr.com/0dpyr2r/BP8liubri/isod.png');
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
text-align: justy;
background: #fff;
padding: 20px;
float: left;
font-size: 8pt;;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
border: 1px solid #eee;
-moz-box-shadow: 0 0 1em #eee;
-webkit-box-shadow: 0 0 1em #eee;
box-shadow: 0 0 1em #eee;
text-align: justify;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
Algumas coisas podem estar diferentes, mas o importante é que seja apagado. Bem, agora, copie o seguinte código e cole após <head> no seu HTML.
<script type="text/javascript">
function changeNavigation(id) {document.getElementById('content').innerHTML=document.getElementById(id).innerHTML}
</script>
Agora, antes de {block:Posts} coloque <div id=”content”> e depois de {/block:Posts} coloque </div>.
Finalmente, vamos ao menu. Adicione as seguintes tags onde quer que apareça:
<span onClick="changeNavigation('MENU1')"> Título 01 </span>
<span onClick="changeNavigation('MENU2')"> Título 02 </span>
<span onClick="changeNavigation('MENU3')"> Título 03 </span>
No lugar de menu1 você pode mudar pelo nome do menu que quiser, mas lembre-se: deve ser diferente dos outros.
Agora vamos à última parte. Adicione o seguinte código antes de </body> no seu HTML:
<div id="MENU1" style="display:none"> Conteúdo do Menu1 </div>
<div id="MENU2" style="display:none"> Conteúdo do Menu2 </div>
<div id="MENU3" style="display:none"> Conteúdo do Menu3 </div>
Perceba que onde você colocou MENU1 antes, deve estar com MENU1 no segundo código e assim nos outros. Substitua Título 01, Título 02, Título 03 pelos títulos e onde pede para colocar conteúdo, já sabe né. Espero que tenha sido útil e CREDITE.
