Só pra avisar, os códigos são do Sohtakana, modificados pela Carol, então se você usar esse tutorial e esses códigos, credite aos dois.  Menu pop up não é difícil de fazer, apenas requer bastante atenção.

Como vai ficar:

Obs.: Os códigos são os mesmos utilizados no Theme 09.

1- Copie esse código no seu CSS (entre <style> e </style>).

Código.

O que você pode alterar:

- Em #fade, você só pode alterar isso: (não modifique mais nada!)

background: #ececec :essa é a cor que vai ficar por cima do seu theme, representado em cinza no preview acima.

- Em .popup_block: (não modifique mais nada!)

background: #fff : é a cor do fundo da janela que vai abrir, representado em branco na imagem.

border: 10px solid #F1DFDE : é a borda da janela que vai abrir, representado em rosa na imagem.

2- Insira esse código antes da tag </head>:

Código.

O que você pode alterar:

- Somente o botão de close.  O link dele é esse, procure isso no código e mude pelo link do botão que você quiser.

3- Coloque esse código onde quer que o menu apareça:

<a href=”#?w=500” rel=”about” class=”poplight ; nav_do_seu_menu“>Nome da aba</a>

Substitua as aspas e coloque no lugar de nav_do_seu_menu a nav do seu menu.  O código acima se refere a um código para um about, mas você pode acrescentar mais abas, é só copiar o código de novo substituindo ‘about’ pelo nome da aba.

4- Copie o código abaixo antes de </body>: (substitua as aspas!)

<div id=”about” class=”popup_block”>

About Me<br>

Sobre você aqui. Sobre você aqui. Sobre você aqui. Sobre você aqui. Sobre você aqui. Sobre você aqui. Sobre você aqui. Sobre você aqui. Sobre você aqui. Sobre você aqui. Sobre você aqui.  <br><br></div>

Obs.: Caso você tenha acrescentado mais abas, copie o código de novo e substitua o ‘about’ na <div id=”about” …>pelo mesmo nome que você usou no passo 3.

Dúvidas na ask.

{Carol}