O que é menu pop-up? O chamado menu pop-up é uma janelinha que se abre, como se fosse uma janelinha normal, abrindo um novo site ou etc. Neste código, o menu pop-up é uma janelinha interna, ou seja, não abre outro site, apresentando apenas um curto conteúdo.
Bom, aqui vai um tutorial detalhado para vocês ensinando como se colocar menu pop-up. Queria pedir, por favor, creditem! Isso não vai matar vocês, não vai doer, nada vai acontecer com a sua coca ou seu doritos, então creditem! Tudo bem? Então, vamos lá. Você precisará de um botão de close para o seu menu, pois o que oferece no site junto ao código, não funciona em outros servidores (tipo o Tumblr), então você pode conseguir um aqui, pegar o link, colocar e novamente, creditar. Depois de escolher ou criar seu botão, vamos começar com o tutorial.
Adicione o código abaixo, este será o link do menu, que levará à janelinha.
<a href="#?w=500" rel="01" class="poplight">Menu 01</a>
<a href="#?w=500" rel="02" class="poplight">Menu 02</a>
<a href="#?w=500" rel="03" class="poplight">Menu 03</a>
Note nas numerações 01, 02 e 03. Estes serão os números de ligação. No menu, ele terá que ser diferente um do outro, mas posteriormente, você usará esses mesmos números para apresentar o conteúdo dessas janelinhas. Por exemplo, vamos supor que o 01, o título é “About me” ou seja, sobre você. Então, no código onde você colocará o conteúdo da janelinha, você usará o número 01 como correspondente e dentro da divisória, o conteúdo do “About me”.
Antes de </body>, adicione os seguintes códigos e coloque os conteúdos correspondentes:
<div id="01" class="popup_block">
Conteúdo do menu 01.
</div>
<div id="02" class="popup_block">
Conteúdo do menu 02.
</div>
<div id="03" class="popup_block">
Conteúdo do menu 03.
</div>
Adicione o seguinte código no seu CSS:
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
A única modificação que eu ensinarei a ser feita (não adianta vir na ask) é a cor da borda grossa. É só você modificar #ddd (que está marcado em negrito) pelo código da cor que você quer após um sustenido (#).
Estamos quase no fim! Agora, adicione o último código. Este deve estar após <head> no seu HTML.
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<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="BOTÃO DE CLOSE" 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>
A última coisa que teremos que fazer é apenas uma substituição básica. Lembra aquele endereço do botão de close que mencionei antes? Pegue o código e coloque onde está BOTÃO DE CLOSE neste último código. Sem remover as aspas que o envolve!
Útil: o menu pop-up não funciona no modo Customize, ou seja, por mais que você tente apertar o botão quando você estiver em Customize, não acontecerá nada. Você pode até pensar que não funciona, mas a dica é você testar em um Tumblr só para testes de themes (Tumblr secundário) » salvar » e visualizar. Assim funcionará!
Fiz o tutorial, expliquei, dei os códigos, dei os botões de close, então não vou responder dúvidas sobre na minha ask.
