Menu deslizante na lateral do blog

Vim trazer este novo tutorial para vocês, ele é bem simples de fazer e você terá que apenas alterar algumas coisas no código.

Prévias:

~~ Ao passar o mouse ~~

~~ Ao soltar o mouse da barra ~~

Aqui está o código, copie e cole em um bloco de notas e modifique apenas onde se pede (está destacado). E depois cole no seu código html, depois de body:

<div id="lateral-belosonho">
<li><a href="HTTP://LINK 1 AQUI COM O HTTP:// NO COMEÇO">nome do link 1</a></li>
<li><a href="HTTP://LINK 2 AQUI COM O HTTP:// NO COMEÇO">nome do link 2</a></li>
<li><a href="HTTP://LINK 3 AQUI COM O HTTP:// NO COMEÇO">nome do link 3</a></li>
<li><a href="HTTP://LINK 4 AQUI COM O HTTP:// NO COMEÇO">nome do link 4</a></li>
</div>

<style>
#lateral-belosonho {
    margin: -7px;
    margin-top: -20px;
    border-right: 10px solid #000;   /* tamanho da borda da direita, estilo da borda e cor hexadecimal */
    padding-right: 20px;
    padding-top: 10px;
    width: 150px;
    text-align: left;
    float: left;
    cursor: pointer;
    position: fixed;
    transition: all 0.8s;
    background: #ccc;        /* Cor do fundo */
    padding: 12px;
    z-index: 3;
    margin-left: -174px;
    text-transform: uppercase;
    height: 100%;
    font-size: 12px;     /* tamanho da font */
}

#lateral-belosonho:hover {

    margin-left: 0px;
}

#lateral-belosonho li{
list-style:none;
}

#lateral-belosonho a{
text-decoration:none;
color:black;  /* cor dos links */
}


</style>