Seja bem vindo(a) ao Sugoi tutoriais =)
Temos temas para blogger, wordpress e outros!
Acompanhe nosso blog pela FANPAGE!
Peça o seu tutorial aqui!

10/19/2013

Menu Agenda

Oi gente, como pediram na Ask. como fazer uma agenda personalizada, achei melhor fazer um "Menu Agenda" que é mais fácil para explicar. Para esse tutorial eu usei um menu do Tumblr Single Themes e o modifiquei {já postei aqui confiram}:

1 - Coloque esse código em seu css;
.menudiv {
background: #eee; /* Cor de fundo da wishlist */
margin-bottom: 2px;
font: 12px Tahoma; /* Tamanho e fonte */
line-height: 18px;
widht: 300px;
height: 29px;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
-ms-transition-duration: .80s;
transition-duration: .80s;
overflow: hidden;
}

.menudiv:hover {
background: #b37206; /* Cor de Fundo da wishlist ao passar o mouse */
margin-left: 0px;
widht: 300px;
height: 29px;
color: #fff; /* Cor da letra da wishlist */
}

.menudiv seta {
background: #b37206; /* Fundo de onde está a seta */
font: 20px Tahoma; /* Tamanho e fonte */
color: #fff; /* Cor da Seta */
padding: 4px;
margin-right: 9px;

}

.menudiv:hover seta {
background: ; /* Cor da Caixinha da seta ao passar o mouse */
color: #513868; /* Cor da setinha ao passar o mouse */
}
2 - Coloque esse código onde quer que apareça;
<div class="menudiv"><seta>01</seta>São Paulo - Brasil</div>
<div class="menudiv"><seta>02</seta>São Paulo - Brasil</div>
<div class="menudiv"><seta>03</seta>São Paulo - Brasil</div>
<div class="menudiv"><seta>04</seta>São Paulo - Brasil</div>

Créditos : Single Themes | Sugoi Tutoriais

4 comentários:

  1. Amei o menu , lindo *o*

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  2. ai lindo, adorei o post.

    http://stroke-of-insanity.blogspot.com.br/

    ResponderExcluir

Seja educado , nossa educação depende da sua.
Criticas e sugestões são bem vindos.
Se reblogar por favor nos avise.