Esse menu é simplesmente lindo! Ele possui uma imagem de perfil e ao clicar, seu menu desliza para o lado mostrando sub categorias. O trouxe em dois modos, um com menu a esquerda e outro a direita. Os créditos vão para os blogs Chuva de HTML e Garota no Mundo do HTML. Se utilizarem por favor credite ambos os blogs. Agora vamos ao tutorial.
1) Vá ao HTML do seu blog e procure por /b:skin, escolha um dos códigos abaixo e cole sobre ele:
Se quiser o menu a direta, copie esse código:
.links { /*locão original - gnmh*/
position: absolute;
right: 3px;
top: 4px;
z-index: 800;
}
#upl, #link1, #link2, #link3 {
position: absolute;
right: 0px;
height: 14px;
width: 50px;
padding: 19px 1px;
text-align: center;
color: #ffffff;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
-webkit-box-shadow: 0px 8px 6px -5px #c3c3c3;
-moz-box-shadow: 0px 8px 6px -5px #c3c3c3;
box-shadow: 0px 0px 0px 0px #c3c3c3;
}
#upl:hover, #link1:hover, #link2:hover, #link3:hover{
padding-right: 216px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out;
}
#upl:hover {color:#cce5fb;}
#link1:hover {color:#bfdefb;}
#link2:hover {color:#aad4fb;}
#link3:hover {color:#8cc4f9;}
#upl {background-color:#cce5fb; top:0px;}
#link1 {background-color:#bfdefb; top:52px;}
#link2 {background-color:#aad4fb; top:104px;}
#link3 {background-color:#8cc4f9; top:156px;}
.innerlinks {
font-size: 10px;
opacity: 0.8;
width: 0px;
position: absolute;
top: 10px;
right: -3px;
overflow-y: hidden;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
overflow-x: hidden;
}
.innerlinks table {width:268px; table-layout:fixed;}
.innerlinks a, .innerlinks a:visited {
padding: 3px 0px;
display:block;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
background-color:#fefefe;
}
.innerlinks a:hover, .innerlinks a:visited:hover {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
border-bottom:0px;
-webkit-box-shadow: 0px 0px 0px 0px #c3c3c3;
-moz-box-shadow: 0px 0px 0px 0px #c3c3c3;
box-shadow: 0px 0px 0px 0px #c3c3c3;
}
#upl .innerlinks a, #upl .innerlinks a:visited {color:#cce5fb;}
#upl:hover .innerlinks a:hover, #upl:hover .innerlinks a:visited:hover{background-color:#cce5fb; color:#fefefe;}
#link1 .innerlinks a, #link1 .innerlinks a:visited {color:#bfdefb;}
#link1:hover .innerlinks a:hover, #link1:hover .innerlinks a:visited:hover{background-color:#bfdefb; color:#fefefe;}
#link2 .innerlinks a, #link2 .innerlinks a:visited {color:#aad4fb;}
#link2:hover .innerlinks a:hover, #link2:hover .innerlinks a:visited:hover{background-color:#aad4fb; color:#fefefe;}
#link3 .innerlinks a, #link3 .innerlinks a:visited {color:#8cc4f9;}
#link3:hover .innerlinks a:hover, #link3:hover .innerlinks a:visited:hover{background-color:#8cc4f9; color:#fefefe;}
#upl:hover .innerlinks, #link1:hover .innerlinks, #link2:hover .innerlinks, #link3:hover .innerlinks {opacity:1; width:270px;
-webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out;}
Se quiser o menu a esquerda, copie esse código:
.links { /* menu locão alterado - chuva de html*/
position: absolute;
margin-right: 3px;
margin-top: 0px;
z-index: 800;
}
#upl, #link1, #link2, #link3 {
position: absolute;
margin-right: 0px;
height: 14px;
width: 50px;
padding: 19px 1px;
text-align: center;
color: #ffffff;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
#upl:hover, #link1:hover, #link2:hover, #link3:hover{
padding-right: 216px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
#upl:hover {color: #c98e8b;}
#link1:hover{color: #cf9da3;}
#link2:hover{color: #cfa7c0;}
#link3:hover{color: #bea7cf;}
#upl {background-color: #c98e8b; top: 0px;}
#link1{background-color: #cf9da3; top: 52px;}
#link2{background-color: #cfa7c0; top: 104px;}
#link3{background-color: #bea7cf; top: 156px;}
.innerlinks {
font-size: 10px;
opacity: 0.8;
width: 0px;
position: absolute;
top: 10px;
right: -3px;
overflow-y:hidden;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
overflow-x:hidden;
}
.innerlinks table {
width: 267px;
table-layout: fixed;
}
.innerlinks a, .innerlinks a:visited {
padding: 3px 0px;
display: block;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
background-color: #fefefe;
}
.innerlinks a:hover, .innerlinks a:visited:hover {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
border-bottom: 0px;
-webkit-box-shadow: 0px 0px 0px 0px #ba7386;
-moz-box-shadow: 0px 0px 0px 0px #ba7386;
box-shadow: 0px 0px 0px 0px #ba7386;
}
#upl .innerlinks a, #upl .innerlinks a:visited {color:#c98e8b;}
#upl:hover .innerlinks a:hover, #upl:hover .innerlinks a:visited:hover{background-color:#c98e8b; color:#fefefe;}
#link1 .innerlinks a, #link1 .innerlinks a:visited {color:#cf9da3;}
#link1:hover .innerlinks a:hover, #link1:hover .innerlinks a:visited:hover{background-color:#cf9da3; color:#fefefe;}
#link2 .innerlinks a, #link2 .innerlinks a:visited {color:#cfa7c0;}
#link2:hover .innerlinks a:hover, #link2:hover .innerlinks a:visited:hover{background-color:#cfa7c0; color:#fefefe;}
#link3 .innerlinks a, #link3 .innerlinks a:visited {color:#bea7cf;}
#link3:hover .innerlinks a:hover, #link3:hover .innerlinks a:visited:hover{background-color:#bea7cf; color:#fefefe;}
#upl:hover .innerlinks, #link1:hover .innerlinks, #link2:hover .innerlinks, #link3:hover .innerlinks {opacity:1; width:270px;
-webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out;}
2) Salve! Agora vá em em Layout, abra um novo gadget JavaScript e dentro dele cole um dos códigos abaixo. Porém cole o código de acordo com o que escolheu acima:
Se escolheu o menu a direta, copie esse código:
<div class="links">
<div id="upl">nav
<div class="innerlinks">
<table style="font-family: trebuchet ms; font-size: 10px; letter-spacing: 1px; text-align: center;" cellspacing="5px" cellpadding="0px"><tr>
<td><a href="/">home</a></td>
<td><a href="/">about</a></td>
<td><a href="/">layouts</a></td>
</tr></table></div></div>
<div id="link1">me
<div class="innerlinks">
<table style="font-family: trebuchet ms; font-size: 10px; letter-spacing: 1px; text-align: center;" cellspacing="5px" cellpadding="0px"><tr>
<td><a href="/">biaslist</a></td>
<td><a href="/">twitter</a></td>
<td><a href="/">tumblr</a></td>
</tr></table>
</div></div>
<div id="link2">cr.
<div class="innerlinks">
<table style="font-family: trebuchet ms; font-size: 10px; letter-spacing: 1px; text-align: center;" cellspacing="5px" cellpadding="0px"><tr>
<td><a href="/">lm</a></td>
<td><a href="/">gnmh</a></td>
<td><a href="/">ip</a></td>
</tr></table>
</div></div>
<div id="link3">+
<div class="innerlinks">
<table style="font-family: trebuchet ms; font-size: 10px; letter-spacing: 1px; text-align: center;" cellspacing="5px" cellpadding="0px"><tr>
<td><a href="/">goodbye</a></td>
</tr></table>
</div></div>
<img src="http://i.imgur.com/jREqe00.png"/>
</div>
Se escolheu o menu a esquerda, copie esse código:
<div style="margin-top: 10px; margin-left: 60px; margin-right: -60px;">
<div class="links">
<div id="upl">nav
<div class="innerlinks">
<table style="font-family: trebuchet ms; font-size: 10px; letter-spacing: 1px; text-align: center;" cellspacing="5px" cellpadding="0px"><tr>
<td><a href="/">home</a></td>
<td><a href="/">sobre</a></td>
<td><a href="/">faq</a></td>
</tr></table></div></div>
<div id="link1">me
<div class="innerlinks">
<table style="font-family: trebuchet ms; font-size: 10px; letter-spacing: 1px; text-align: center;" cellspacing="5px" cellpadding="0px"><tr>
<td><a href="/">perfil</a></td>
<td><a href="/">tags</a></td>
<td><a href="/">participo</a></td>
</tr></table>
</div></div>
<div id="link2">map
<div class="innerlinks">
<table style="font-family: trebuchet ms; font-size: 10px; letter-spacing: 1px; text-align: center;" cellspacing="5px" cellpadding="0px"><tr>
<td><a href="/">mapas</a></td>
<td><a href="/">arquivo</a></td>
<td><a href="/">temas</a></td>
</tr></table>
</div></div>
<div id="link3">+
<div class="innerlinks">
<table style="font-family: trebuchet ms; font-size: 10px; letter-spacing: 1px; text-align: center;" cellspacing="5px" cellpadding="0px"><tr>
<td><a href="/">layouts</a></td>
</tr></table>
</div></div></div>
<div style="margin-bottom: -14px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jqzvQwkDWJs7iskCuVPBg9926DGBgORHFtCt6reXAGXundTuILGNYtOFeKGYV9ZO18GnFJlIKIgVsXwvXfM8S9XGqbA24O2lNr_ivgOJNK2R74PYLHyeuGUdcERc1-_v_erNXGP9oNA/s1600/02.png"/></div>
</div></div>
É só isso queridos, espero que tenham gostado. Qualquer dúvida ou dificuldades basta deixar um comentários. XoXo~
Nenhum comentário:
Postar um comentário