Menu Simple
Autor: ☆~Lisa~☆ | Publicado: 2016-12-02T14:59:00-02:00






Olá, pessoal &lt;3

Quem aí já está de férias? Eu ainda não estou ;-; Não sei o motivo pelo qual minha escola resolveu prolongar tanto as aulas. Tenho vários amigos que já estão em casa, descansando, e eu desesperada estudando ¬¬

Enfim, estou muito&nbsp;ansiosa para ensinar o tutorial de hoje, já que é um menu criado por mim &lt;3 Em meio ao desespero dos estudos, vim trabalhando também com HTML, criando e testando alguns efeitinhos &gt;3&lt; Este menu é o Simple, por ser bem simplesinho e eu estar sem criatividade, hahaha Fiz em dois modelos: o primeiro, pensando em links de páginas, e o segundo em duas colunas, pensando em links para tags.





|&nbsp;LIVE PREVIEW&nbsp;|


Modelo 1

Vá no seu HTML, e, cole acima de ]]&gt;&lt;/b:skin&gt;:


.menusimple {
color: #727272;
text-shadow: 1px 1px 1px #fff;
background: #f6cac9;
border-radius: 8px 0px 8px 0px;
margin-top: 4px;
margin-bottom: 4px;
padding: 2px 2px 2px 2px;
width: 250px;
height: 15px;
font-family: Verdana;
font-size: 10px;
text-decoration: bold;
text-transform: uppercase;
letter-spacing: 0px;
text-align: center;
float: center;
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
}
.menusimple:hover {
color: #fff;
text-shadow: 1px 1px 1px #727272;
letter-spacing: 2px;
background:#91a7d0;
border-radius: 0px 8px 0px 8px;
}

Recomendo que altere a largura (em negrito) conforme o tamanho de sua sidebar.

Caso queira alterar as cores: em itálico, estão as cores do texto (normal e hover, respectivamente), e, em sublinhado, as cores do fundo (idem).

Em seguida, crie um gadget de HTML/Javascript e, nele, cole:


&lt;center&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;/center&gt;


Modelo 2

Este é o modelo com duas colunas. Possui alguns códigos a mais, mas sua edição é praticamente mesma do anterior.

Vá no seu HTML, e, acima de ]]&gt;&lt;/b:skin&gt;, cole:


.left { float:left; width:49%; text-align:justify; }
.right { float:right; width:49%; text-align:justify; }
.menusimple2 {
color:#727272;text-shadow: 1px 1px 1px #fff;
background:#f6cac9;border-radius: 8px 0px 8px 0px;
margin-top: 4px;
margin-bottom: 4px;
padding: 2px 2px 2px 2px;
width: 135px;height: 15px;
font-family: Verdana;
font-size: 10px;
text-decoration: bold;
text-transform: uppercase;
letter-spacing: 0px;
text-align: center;
float: center;
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
}
.menusimple2:hover {
color:#fff;text-shadow: 1px 1px 1px #727272;
letter-spacing: 2px;
background:#91a7d0;border:solid 2px solid #728dbe;
border-radius: 0px 8px 0px 8px;
}

Mais uma vez, recomendo alterar a largura (em negrito). Em itálico estão as cores do texto, e em sublinhado, as cores do fundo.

Em seguida, em um gadget de HTML/Javascript, cole:


&lt;div class="left"&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple2"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple2"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple2"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple2"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="right"&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple2"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple2"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple2"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="menusimple2"&gt;TEXTO&lt;/div&gt;&lt;/a&gt;
&lt;/div&gt;

Os códigos após &lt;div class="left"&gt; se referem à coluna esquerda, enquanto os códigos após &lt;div class="right"&gt; se referem à coluna direita.


Espero que tenham gostado do tutorial &lt;3 Em breve trarei mais, como o efeito turns, que já pode ser visualizado no blog de demonstrações.


~Abraços!