Tutorial - Menu Vertical Flutuante

Créditos a Bunny Crazy

Olá! Como estão? Olha pessoas lindas , eu to praticamente ficando maluca , por que aqui em casa tá uma coisa muito ruim ,  e não sei por quanto tempo irei suportar. Ás vezes , sinto que quero fugir daqui , ir pra algum lugar que me deixe bem. Eu gosto da minha casa , só fico cansada de não fazer nada aqui . Provavelmente eu vá embora algum dia , ir pra algum lugar que me deixa bem e feliz. Por que sinto que quero ir , mais não sei por quanto tempo suportarei a distância , mais preciso acreditar e pensar em mim , no que é pior pra mim. Para de pensar nas pessoas que não me amam, e nem se importam com meus sentimentos e nem o que sinto. Por mais que amo , tá na hora de pensar em mim. E eu quero muito ser de verdade uma pessoa legal pra mim mesma , já que ninguém pensa em mim , por que não pensar agora em mim. Então vamos dizer um basta né? Então vamos lá!

Menu Vertical

Esse tutorial não é meu , como sempre ainda não tenho coisas minhas , mais futuramente acreditem eu terei, e vocês iram gostar prometo. Esse tutorial vem do Bunny Crazy , e o link está lá em cima , espero que gostem e é um tutorial bem simples amores , nada de erros , e se houver fale comigo. :)

Exemplo 1

01. Procure por ]]>< , e cole acima esse código :

#menubc{
opacity: 1; /* nao mexa */
position:absolute;  /* posiçao */
margin-top:-160px; /* margem para subir */
margin-left:223px; /* margem para o lado */
overflow:hidden;   /* nao mexa */
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#menubc a{
display: block;  /* nao mexa */
line-height: 4px;  /* nao mexa */
padding-right:5px;  /* nao mexa */
margin-left:0px;  /* nao mexa */
margin-bottom:1px;  /* nao mexa */
padding:4px;  /* espaço dentro do menu */
width:35px;  /* largura */
height: 6px;  /* altura */
background: rgba(238,223,199,.5);  /* cor de fundo */
border-right:4px #e26b71 solid;  /* borda */
font-family: PF Arma Five;  /* fonte */
font-size:8px; /* tamanho de fonte */
color:#baaa90;  /* cor de fonte */
text-align:right;  /* posiçao de fonte */
text-transform: uppercase; /* tipo de fonte */
-webkit-transition:all .3s linear;
-moz-transition:all .3s linear;
-ms-transition:all .3s linear;
}
#menubc a:hover{
border-right:0px #CCC solid;   /* borda */
padding-right:6px;   /* nao mexa */
}

02. Agora vá até "Layout" e crie um novo, ou abra um, gadget html/javascript e dentro dele cole:

<div id="menubc">
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
</div>

Exemplo 2

01. Procure por ]]>< , e cole esse código :

#menubc{

opacity: 1; /* nao mexa */

position:absolute;  /* posiçao */

margin-top:-102px; /* margem para subir */

margin-left:216px; /* margem para o lado */

overflow:hidden;  /* nao mexa */

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;

}

#menubc a{

display: block;  /* nao mexa */

line-height: 4px;  /* nao mexa */

padding-right:5px; /* nao mexa */

margin-left:0px;  /* nao mexa */

margin-bottom:3px; /* nao mexa */

padding:4px; /* espaço dentro do menu */

width:35px; /* largura */

height: 6px; /* altura */

background:#dbcfc0; /* cor de fundo */

font-family: PF Arma Five;

font-size:8px;  /* tamanho de fonte */

color: #a3998d;  /* cor de fonte */

text-align:center;  /* posiçao de fonte */

text-transform: uppercase; /* tipo de fonte */

box-shadow: 1px 1px 1px #a3998d, inset 0px 0px 5px #dbcfc0;  /* sombra */

-webkit-transition:all .3s linear;

-moz-transition:all .3s linear;

-ms-transition:all .3s linear;

}

#menubc a:hover{

background: rgba(250,250,00,0.00);

box-shadow: 0px 0px 0px #a3998d, inset 0px 0px 0px #dbcfc0;

} 

02. Agora vá até "Layout" e crie um novo, ou abra um, gadget html/javascript e dentro dele cole:

<div id="menubc">
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
</div> 

Pronto , finalize com seu toque fiquei , e pronto perfeito em seu layout. Espero que tenham gostado , até a próxima.