Menu de sidebar [duas colunas]

Oi! Como vão? Eu estou bem, peguei meu boletim e o que eu pensei que seria desastroso acabou por ser ótimo: nenhuma nota vermelha (abaixo de sete) e a maioria — das de humanas, é claro — beirando o dez. Caramba, vocês não imaginam o quanto eu fiquei feliz, considerando a enorme CDF que sou. Falando em felicidade, estou muito satisfeita em estar de volta por aqui, mas ainda tenho que voltar ao meu ritmo frenético de postagens. Engraçado que eu montei a agenda de próximas postagens do blog sem ter nenhum material pronto, então por isso demorei a trazer um post novo, pois estava desenvolvendo os modelinhos de menu do zero. Então, já aproveito para justificar eventuais futuros atrasos, nada com o que não estejam acostumados, huh? Eu sou uma vergonha. Bom, são modelos bem simplezinhos com hover e eu gostei bastante deles, ficaram bem fofinhos, então espero que vocês aprovem. Comentem o que acharam. Se usarem, não se esqueçam de creditar e como sempre, não rebloguem. Vamos lá dar uma olhadinha nesses menus?

☆ live preview

No painel de controle do Blogger, clique em Layout, adicione um gadget HTML/JavaScript e cole o código do menu que escolher.

modelo 1

<style>
.direita { float:right; width:49%; text-align:center; }
.esquerda { float:left; width:49%; text-align:center; }
#status1{
width: 91%;
background: #d6e0e4;
height: 15px;
float: left;
font: 11px arial;
color: #fff;
text-align: center;
text-transform: uppercase;
margin-bottom: 4px;
padding: 3px;
-webkit-transition-duration: .10s;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#status1:hover{
font-style: italic;
letter-spacing: 2px;
background: #c3d7df;
-webkit-transition-duration: .10s;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
} </style>

<div class="esquerda">

<a href="LINK" id="status1">TÍTULOAQUI</a>

<a href="LINK" id="status1">TÍTULOAQUI</a>

<a href="LINK" id="status1">TÍTULOAQUI</a>

</div>

<div class="direita">

<a href="LINK" id="status1">TÍTULOAQUI</a>

<a href="LINK" id="status1">TÍTULOAQUI</a>

<a href="LINK" id="status1">TÍTULOAQUI</a>

</div>

modelo 2

<style>
.direita { float:right; width:49%; text-align:center; }
.esquerda { float:left; width:49%; text-align:center; }
#status2{
width: 91%;
background: #fff;
height: 15px;
float: left;
font: 11px arial;
color: #ccc;
text-align: center;
text-transform: uppercase;
margin-bottom: 4px;
padding: 3px;
border: dashed 1px #ccc;
-webkit-transition-duration: .10s;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#status2:hover{
border: solid 1px #ddd;
letter-spacing: 2px;
-webkit-transition-duration: .10s;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
} </style>

<div class="esquerda">

<a href="LINK" id="status2">TÍTULOAQUI</a>

<a href="LINK" id="status2">TÍTULOAQUI</a>

<a href="LINK" id="status2">TÍTULOAQUI</a>

</div>

<div class="direita">

<a href="LINK" id="status2">TÍTULOAQUI</a>

<a href="LINK" id="status2">TÍTULOAQUI</a>

<a href="LINK" id="status2">TÍTULOAQUI</a>

</div>

modelo 3

<style>
.direita { float:right; width:49%; text-align:center; }
.esquerda { float:left; width:49%; text-align:center; }
#status3{
width: 91%;
height: 15px;
float: left;
font: 11px arial;
color: #fff; /* cor da fonte */
text-align: center;
text-transform: uppercase;
text-shadow: 0px 1px 0px #c3d7df; /* sombra do texto */
background-color: #d6e0e4; /* cor de fundo */
margin-bottom: 4px;
padding: 3px;
border: solid 1px #c3d7df; /* cor do contorno */
outline-offset: -5px;
outline: 1px dotted #fff; /*cor da borda interna */
-webkit-transition-duration: .10s;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#status3:hover{
opacity: 0.8;
-webkit-transition-duration: .10s;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
} </style>

<div class="esquerda">

<a href="LINK" id="status3">TÍTULOAQUI</a>

<a href="LINK" id="status3">TÍTULOAQUI</a>

<a href="LINK" id="status3">TÍTULOAQUI</a>

</div>

<div class="direita">

<a href="LINK" id="status3">TÍTULOAQUI</a>

<a href="LINK" id="status3">TÍTULOAQUI</a>

<a href="LINK" id="status3">TÍTULOAQUI</a>

</div>

Os códigos em negrito são os códigos de cores que podem ser alterados tranquilamente. É isso, se cuidem e fiquem bem.