Aprenda a como fazer o menu continuando a ler a postagem!
1 Vá para Tema > Editar HTML > Clique na caixa de código e aperte Ctrl + F ou F3 > Procure por ]]></b:skin> > Cole o seguinte código acima:
2 Faça as alterações necessárias, como alterar as cores e tamanhos.
3 Salve.
4 Vá até o local que quer adicionar o menu e cole o seguinte código abaixo:
5 Faça as alterações necessárias.
6 Salve.
ul.sharp-list li {
background: #eee;
width: 300px;
text-align: left;
margin: 1px !important;
padding: 3px 3px 3px 10px !important;
display: -webkit-inline-box;
box-shadow: inset 3px 0 0px 0 #C16E70;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul.sharp-list li, ul.sharp-list li a {
color: black !important;
}
ul.sharp-list li:hover {
box-shadow: inset 300px 0 0px 0 #813738; /* Mesmo tamanho do width */
}
ul.sharp-list li:hover, ul.sharp-list li:hover a {
color: white !important;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
<ul class="sharp-list">
<li><a href="LINK">Início</a></li>
<li><a href="LINK">Sobre nós</a></li>
<li><a href="LINK">Contato</a></li>
</ul>
Olá, boa tarde! Achei esse menu lindo!
ResponderExcluirEu adoro ver os códigos, consigo saber alguns só por olhar e ando treinando muuuito! Até comprei um curso que ensina várias coisas... HTML, CSS, Bootstarp, JavaScript... Mas, empaquei. Fico com uma preguiça tem uns dias... Contudo, aos poucos volto, pois preciso aprender mais.
Aguardo pelos próximos posts. :)
Oie!
ExcluirA parte mais legal de estar aprendendo algo é conseguir ver as coisas acontecendo e entender o que é responsável por cada comportamento. Parece que o curso que você comprou é bem completinho pra desenvolvimento web/frontend, recomendo continuar, vai ser muuuito útil!
Logo logo tem mais posts, essas últimas semanas eu tava viajando e acabei deixando de postar xD
Alan, você é o melhor <3
ResponderExcluirO menu está incrível e o hover dele é perfeito.
xoxo.
Você que é <3
ExcluirOieee coisa fofá ~
ResponderExcluirAmei o efeito dele, por mais que seja simples ele ficou tão fofo e como menus assim ajudam a gente né? Eu não vivo sem menus assim nos temas que eu uso..
Beijoca =3
Eu particularmente adoro efeitos simples, acho que eles dão um certo ~charme~ pros templates, adoro usar nos temas que faço :3
ExcluirKissus~