Menu lateral oculto

Okaeri ^^

Para hoje, trago um menu que adaptei do blog Reino Kawaii. Esse blogs tem tutoriais muito interessantes, que não se encontram em quase mais lado nenhum, e embora por vezes a personalização seja um pouco exagerada e "kawaii" demais, dá para inventar códigos incríveis. Foi por isso que eu criei o meu próprio modelo de um menu lateral, oculto, que só aparece quando as pessoas clicam num coração ou outro tipo de item. E é clicar mesmo, não apenas passar o mouse. Bem, quem estiver interessado, a prévia e o tutorial está abaixo.

Prévia: www

Tutorial:

1. Procure por:

/b:skin

Acima cole:

@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
#menuoculto { /*área geral - posicione-o com a margem*/
width: 100%;
height: 100%;
margin: -100px 0px 0px -33px; /*respetivamente: topo esquerda, topo direita, baixo direita, baixo esquerda*/
}
.move {
float: left;
position: relative;
}
#tm {
display: none;
}
.move section { /*area onde fica o botão menu - não alterar */
width: 350px;
height: 150px;
position: relative;
transition: all 0.25s;
}
.move section label { /*não alterar*/
display: block;
padding: 10px 0;
width: 60%;
position: absolute;
left: 20%;
top: 100px;
cursor: pointer;
}
.linkss { /*links*/
width: 60px;
height: 100%;
margin-bottom: 2px;
position: absolute;
padding: 20px;
-webkit-transition-duration: .60s;
}
.linkss li {
list-style-type: none;
}
.linkss a { /*texto dos links*/
color: #b5c983;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 1px #fff;
-webkit-transition-duration: .60s;
}
.linkss a:hover { /*texto dos links - hover*/
color: #de8d87;
text-decoration: none;
-webkit-transition-duration: .60s;
}
.linkss b { /*caixa dos links*/
opacity: 0; /*não remover!!!*/
font-size: 8px;
font-family: silkscreen;
display: block;
transform: translateX(50px);
line-height: 20px;
border-left: 1px dashed #de8d87;
background: #d8deaf;
border-radius: 0px 10px 10px 0px;
box-shadow: inset 0px 0px 3px #c2cc8b;
-webkit-transition-duration: .60s;
}
.linkss b:hover { /*caixa dos links*/
background: #d4c8be;
border-radius: 0px;
border-left: 5px solid #de8d87;
box-shadow: inset 0px -10px 0px 0px #dbd1ca;
-webkit-transition-duration: .60s;
}
#tm:checked ~ section {transform: translateX(150px);}
#tm:checked ~ .linkss b {opacity: 1; transform: translateX(0);}
#tm:checked ~ .linkss li:nth-child(1) b {transition-delay: 0.08s;}
#tm:checked ~ .linkss li:nth-child(2) b {transition-delay: 0.16s;}
#tm:checked ~ .linkss li:nth-child(3) b {transition-delay: 0.24s;}
#tm:checked ~ .linkss li:nth-child(4) b {transition-delay: 0.32s;}
#tm:checked ~ .linkss li:nth-child(5) b {transition-delay: 0.40s;}
#tm:checked ~ .linkss li:nth-child(6) b {transition-delay: 0.48s;}

2. Cole esse código num gadget HTML/Javascript:

<div id="menuoculto">
<div class="move">
<div style="margin-bottom: -20px;">
<section>
<label for="tm"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEh4DETNnKN-cPjOcTXFg1KO3kL2K8-wX6Zl6ecrtS8Ljg-2deK0TA0UnJQQ9WzCljNcYM_Vqyug5Agi-CWm5uWaEzGfHtekyKpP15VgYqueH1vSutZoIPemSkOwwpOcIjBtiKRYKkDMI/s1600/menu.png" /></label>
</section></div>
<input id="tm" type="checkbox" />
<ul class="linkss">
<li><a href="LINK"><b>♥Link 1</b></a></li>
<li><a href="LINK"><b>♥Link 2</b></a></li>
<li><a href="LINK"><b>♥Link 3</b></a></li>
<li><a href="LINK"><b>♥Link 4</b></a></li>
</ul>
<div style="margin-bottom: 100px;"></div>
</div></div>

3. Posicione da melhor maneira possível no seu blog. Para o fazer, tem de ser no html. Edite as cores conforme quiser, na caixa dos links e no resto. Para adicionar mais links, vá ao gadget, e repita a linha seguinte antes de </ul> que dizem:

<li><a href='LINK'><b>♥Link </b></a></li>

O código é extenso e talvez pareça complicado, mas é facílimo mudar as cores, só alterar a margem é que dá algum trabalho. Espero que tenham gostado :)