Oizinho outra vez! Bom hoje trago um menuzinho que já foi pedido a um tempinho já, mas havia me esquecido de postar mas.... lembrei agora Yeeee!!! Ele praticamente não tem efeitos, mas podem adicionar a graça dele é a imagem lateral, qual deixa muito gracioso. Esse menu eu utilizei no meu layout Wa, qual foi bastante pedido. Agora é só seguir o tutorial que é mais simples ainda. Brevia do menu: www:
Exemplo: Layouts Zero Zelo & Wa
Códigos
/*Menu statisca
----------------------------------------------- */
.menuclass {
height: 10px; /* Largura do menu */
width: 147px; /* Altura do menu */
display: block; /* Exibir em bloco */
font-size: 8px; /* Tamanho da fonte */
color:#baaa90; /* Cor do texto */
text-transform: uppercase;
font-family: PF Arma Five; /* Fonte */
text-align: left; /* Alinhamente do texto */
text-indent : 4px;
margin-right: 144px;
margin-bottom: 1px;
padding: 3px; /* Margem interna */
background: rgba(238,223,199,.5);
border: 1px solid #ebe3d7; /* Borda */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition-duration: .80s;
}
.menuclass:hover {
text-indent : 37px;
color:#e58388; /* Cor do texto */
-webkit-transition-duration: .80s;
}
/* Imagem do statisca
----------------------------------------------- */
.menuimg {
height: 148px; /*Altura da imagem */
width: 48px; /* Largura da imagem */
border: 1px solid #d74951;
background:#e9e6de;
box-shadow: inset 0 0 16px #eee, 0 0 0px #ccc;
padding: 1px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.menuimg:hover {
-webkit-filter: contrast(1.2);
-webkit-transition:all 1s ease;
}
----------------------------------------------- */
.menuclass {
height: 10px; /* Largura do menu */
width: 147px; /* Altura do menu */
display: block; /* Exibir em bloco */
font-size: 8px; /* Tamanho da fonte */
color:#baaa90; /* Cor do texto */
text-transform: uppercase;
font-family: PF Arma Five; /* Fonte */
text-align: left; /* Alinhamente do texto */
text-indent : 4px;
margin-right: 144px;
margin-bottom: 1px;
padding: 3px; /* Margem interna */
background: rgba(238,223,199,.5);
border: 1px solid #ebe3d7; /* Borda */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition-duration: .80s;
}
.menuclass:hover {
text-indent : 37px;
color:#e58388; /* Cor do texto */
-webkit-transition-duration: .80s;
}
/* Imagem do statisca
----------------------------------------------- */
.menuimg {
height: 148px; /*Altura da imagem */
width: 48px; /* Largura da imagem */
border: 1px solid #d74951;
background:#e9e6de;
box-shadow: inset 0 0 16px #eee, 0 0 0px #ccc;
padding: 1px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.menuimg:hover {
-webkit-filter: contrast(1.2);
-webkit-transition:all 1s ease;
}
Agora salve!
Códigos
<img src="endereço da imagem" class="menuimg" align="right" />
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
◤Entendendo o código◥
• .menuclass: É a tag do menu de barras, ele já vem explicando os pedaços mais importantes do código.
• .menuimg: É o código da imagem lateral a altura da imagem deve ser um px maior do que do menu. EX: O menu esta com 147 px de altura, a imagem deve ficar com 148px de altura.
• endereço da imagem: Coloque o endereço/url/link da imagem.
• Digite aqui: Você coloca o texto que fiará dentro do menu, como nome, metas, pessoas online etc...
Vou usar, gostei desse menu ^^
ResponderExcluirMr-Exemplar.blogspot.com.br
Esta bem, obrigada por gostar.
ExcluirFica super lindo, já estou utilizando no meu *-* http://vihpaula.blogspot.com.br/
ResponderExcluirAin que bom =3
ExcluirUsando desde já <3
ResponderExcluirGrata =3
Excluir