Menu retrátil vertical CSS para Blogger

Olá amigos Mult-focos, temos neste post um menu retrátil vertical CSS para Blogger. Este menu tem um efeito muito bonito ao ser clicado pelo mouse e tem todas as dicas no próprio código para configurar sua cor, etc.

Menu suspenso com imagem para Blogger

Veja um demo ao vivo de como é este menu, clicando no botão abaixo e ou em result.


DEMO
Como adicionar em seu blog?

É muito simples basta copiar o código Javascript do Box de códigos, configurar e depois adicionar em um gadget, se não sabe como adicionar um gadget aprenda AQUI. OBS: Use nosso gerador de cores para mudar a cor do seu meu. Isto é tudo.

---

<style>
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}
html{
  height: 100%;
background: rgb(234, 246, 243);
}
body{
  text-align:center; 
  vertical-align:middle;
  height:100%;
}
body:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.menu{
  vertical-align:middle;
  width:300px;
  display:inline-block;
 font-family: 'Bauhaus 93', sans-serif;/*--TIPO DA FONTE--*/
  transform:translate3d(0,0,0);
}
.menu input{
  position:absolute;
  left:-9999px;
}
.menu #togglemenu:checked ~ ul {
  max-height:300px;
  padding-bottom:1em;
}
.togglemenu {
background: #FC634B;/*--COR DE FUNDO DO MENU--*/
color: white;
display: block;
padding: 0.75em;
text-align: center;
cursor:pointer;
font-family: 'Bauhaus 93', sans-serif;/*--TIPO DA FONTE--*/
}
.togglemenu:before{
  content: "\2630";
  font-size:1.5em;
  vertical-align:middle;
}
.menu ul{
  margin-top:2px;
  text-align:left;
  max-height:0px;
  overflow:hidden;
  padding-bottom:0;
  transition:300ms ease all;
}
.menu li{
  margin-bottom:1px;
  position:relative;
  z-index:10;
  transition:300ms ease all;
}
.menu li a {
display: block;
position:relative;
width:100%;
padding: 1em;
background: rgb(192, 192, 192);
text-decoration:none;
color:white;/*--COR DA FONTE--*/
box-sizing:border-box;
transition:300ms ease all;
}
.menu li:hover a {
width:99%;
margin-left:1%;
box-shadow: inset 300px 0 300px -300px rgba(255, 255, 255, 0.6);
}
.menu li:before {
content: "";
position: absolute;
width: 50%;
height: 30%;
left: 1%;
bottom: 16px;
box-shadow: 10px 0 0px black;
transition:300ms ease all;
transform: rotate(0deg);
}

.menu li:hover:before {
box-shadow: 10px 0 30px black;
transform: rotate(-4deg);
bottom: 6px;
}
.menu li:hover + li{
  z-index:1;
}
</style>
<nav class="menu">
  <input type="checkbox" id="togglemenu" checked />
  <label for="togglemenu" class="togglemenu"></label>
  <ul>
    <li><a href="URL">Link 1</a></li>
    <li><a href="URL">Link 2</a></li>
    <li><a href="URL">Link 3</a></li>
    <li><a href="URL">Link 4</a></li>
    <li><a href="URL">Link 5</a></li>
    <li><a href="URL">Link 6</a></li>
  </ul>
</nav>

See the Pen fvByw by Mairink (@Oemes) on CodePen.

---

---