12/22/2012

Tutorial- Menu Hover Lateral




Olá meus nekos!
Hoje e troxe um tutorial, de um menu, o menu que eu uso no blog, se chama Menu Hover Lateral, aprendi no blog Vodka & Coca, então, créditos à ele!
O menu é este:



Vá em modelo >> editar HTML >> procure por: ]]></b:skin>

Cole acima dele este código:

.menuhoverlateral {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-left: 5px solid  #ff5c5c; /*Borda de lado*/
font-size: 8pt;
font-family: verdana, Lucida Sans Unicode;
line-height: 15px;
border-bottom : 1px dashed #666666; /*Borda de baixo*/
text-indent : 5px;
vertical-align : middle;
 background: #f5f5f5; /*Cor de fundo*/
padding-left : 10px;
padding-bottom : 2px;
-webkit-transition: 0s linear;
-webkit-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.menuhoverlateral:hover {
border-left: 25px solid  #ff5c5c; /* Borda de lado em hover*/
font-size: 8pt;
font-family: verdana, Lucida Sans Unicode;
border-bottom : 1px solid #666666; /*borda de baixo em hover*/
line-height: 15px;
text-indent : 5px;
background : #ffffff; /*fundo em hover*/
padding-left : 10px;
padding-bottom : 5px;
}

Sbititua as cores usando a tabela de cores e salve.

Agora adicione um gadget HTML/JavaScripte cole nele:

<div class="menuhoverlateral"><a href="URL DA PÁGINA">NOME DA PÁGINA</a></div>
<div class="menuhoverlateral"><a href="URL DA PÁGINA"> NOME DA PÁGINA</a></div>
<div class="menuhoverlateral"><a href="URL DA PÁGINA">NOME DA PÁGINA</a></div>
<div class="menuhoverlateral"><a href="URL DA PÁGINA"> NOME DA PAGINA</a></div>

Faça as alterações e salve!
Até mais!

2 comentários:

  1. Este estilo de menu é muito kawaii e tem sido bastante usado. Já vi vários blogs com ele, mas nunca tinha procurado o tutorial >.< arigatou pelo post, talvez eu use em meu próximo lay :-p

    Maria-chan, gostei muito seu blog, é tão kawaii ^_^ não tinha como não virar seguidora! Kissus ;->

    www.shoujoeafins.blogspot.com

    ResponderExcluir
    Respostas
    1. Este estilo de menu é lindo mesmo!
      Que bom que gostou do meu blog!
      Fico muito agradecida!
      Vou visitar seu blog!

      Excluir

Oi meus Cats!
Regrinhas dos comentários:

-Sem ofensas a algum leitor, autor ou blog.
-Sem conteúdo ofensivo.
-Deixe o link do seu blog no comentário, que assim que puder retribuirei a visita.
-Pedidos, na Ask.
-Se comentou, volte para ver a resposta do comentário.
-"Seguindo, segue de volta?", aceito, não vejo mal nem um. Mas se não houver nada no comentário a ver com a postagem, o comentário será ignorado.

Comenta, vai?