Menu Hover com CSS3

 Fala aí gente, aqui é o Anon e hoje venho trazendo mais um tutorial pra vocês, dessa vez é um menu Hover (aqueles menus que quando passa o mouse sobre, ele troca a cor) com CSS3. O que me levou a fazer esse tutorial foi ver um menu hover com imagens que quando passa o mouse a segunda imagem demora à carregar(é meio desagradavel), então decidi criar um menu com uma aparência legal e que não tivesse esse "problema".  Enfim, vamos lá.

DEMONSTRAÇÃO

Os códigos devem ser inseridos acima desta linha.

]]></b:skin>

 Eu o nomeei como .menu-s (provido de menu-sidebar)
 Algumas coisas que você têm que saber sobre a estrutura de um menu hover:
 Quando aparecer uma linha dessa forma ex: ".menu-s {", iremos definir as características principais do menu, sendo, posicionamento, fonte, etc.
 Quando aparecer uma linha dessa forma ex: ".menu-s a{", iremos definir as características visuais do menu antes de passar o mouse, tais como, fonte, cor,  altura e largura,  etc.
 Quando aparecer uma linha dessa forma ex: ".menu-s a:hover{", iremos definir as características visuais do menu ao passar o mouse em cima, tais como, fonte, cor, altura e largura, etc.

 Então vamos construir o menu, no caso, eu estarei fazendo o menu para a sidebar (coluna lateral), portanto, não usaremos ".menu-s {" e sim apenas ".menu-s a{" e ".menu-s a:hover {"
 Então vamos começar definindo como deve ser antes de passar o mouse, vai ficar assim:

.menu-s a{
background: -webkit-gradient(linear, left top, left bottom, from(#COR), to(#COR));
width:XXpx; /* --Define a largura--*/
height:XXpx; /* --Define a Altura--*/
font-family:Arial; /* --Define a fonte--*/
font-size:13px; /* --Tamanho da fonte--*/
color:#COR; /* --Cor da fonte--*/
display:block;
margin:0 0 0px 0px; /* --define posicionamento do menu--*/
border-radius:Xpx; /* --arredondamento das bordas--*/
line-height:XXpx; /* --distancia da linha--*/
}

NOTAS: Na linha "background", nos campos "#cor", o primeiro você irá definir a cor de cima, no segundo você irá definir a cor de baixo (degradê).

Agora vamos definir as características de como deve ser ao passar o passar o mouse, vai ficar assim:


.menu-s a:hover{
background: -webkit-gradient(linear, left top, left bottom, from(#COR), to(#COR));
width:XXpx; /* --Define a largura--*/
height:XXpx; /* --Define a Altura--*/
font-family:Arial; /* --Define a fonte--*/
font-size:13px; /* --Tamanho da fonte--*/
color:#COR; /* --Cor da fonte--*/
display:block;
margin:0 0 0px 0px; /* --define posicionamento do menu--*/
padding:0 0 0px 0px; /* --define posicionamento do texto--*/
border-radius:Xpx; /* --arredondamento das bordas--*/
line-height:XXpx; /* --distancia da linha--*/
}

NOTAS: Na linha "background", nos campos "#cor", o primeiro você irá definir a cor de cima, no segundo você irá definir a cor de baixo (degradê).
Aqui vai um exemplo de como esse menu ficaria montado:


.menu-s a{
background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#CCC));
width:143px;
height:13px;
font-family:Arial;
font-size:13px;
color:#fff;
display:block;
margin:0 0 1px 2px;
border-radius:3px;
line-height:12px;
}
.menu-s a:hover{
background: -webkit-gradient(linear, left top, left bottom, from(#00CCFF), to(#0099FF));
width:143px;
height:13px;
font-family:Arial;
font-size:13px;
color:#fff;
display:block;
margin:0 0 1px 2px;
border-radius:3px;
line-height:12px;
cursor:pointer;
}

Agora para usá-lo, no gadget, você tem que usar o seguinte código:

<div class="menu-s">
<a href="LINK">Categoria</a>
<a href="LINK">Categoria</a>
<a href="LINK">Categoria</a>
</div>