Tutorial: Menu double (Adaptado + Simplificado)
Autor: Wendy Chan | Publicado: 2017-08-08T15:40:00-03:00





Quem não ama menus? Eu amo menus! Esse menuzinho encontrei lá no Chuva de HTML, sendo uma adaptação de um menu do blog&nbsp;GNMH e do The Moon, então ao utilizarem, credite o trio dos blog citados, afinal só estou compartilhando aqui.


.::Ver o menu online::.



1) Para aplica-lo é o mesmo de sempre, vá ate seu HTML e procure&nbsp;]]&gt;&lt;/b:skin&gt; e acima dele cole o código abaixo:&nbsp;

.dd1{
width:30%;
padding: 5px 0 4px 0;
margin: 0 0 4px 4px;
float: left;
height: 17px;
text-align: center;
font-size: 13px;
background: #d3ebe8;
border: 1px solid #c5dbd8;
outline: solid 1px #fff;
outline-offset: -4px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.dd1:hover{
outline: solid 0px none;
opacity: 0.5;
outline-offset: -20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-shadow: 1px 1px 0 #514758;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.dd1 a{
color: #b8b78a;
text-shadow: 1px 1px 0 #fff;
text-decoration: none;
}
.dd2{
width:30%;
padding: 5px 0 4px 0;
margin: 0 0 4px 4px;
float: left;
height: 17px;
text-align: center;
font-size: 13px;
background: #e3d1c3;
border: 1px solid #d4c2b4;
outline: solid 1px #fff;
outline-offset: -4px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.dd2:hover{
outline: solid 0px none;
opacity: 0.5;
outline-offset: -20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-shadow: 1px 1px 0 #514758;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.dd2 a{
color: #ba9e96;
text-shadow: 1px 1px 0 #fff;
text-decoration: none;
}



Salve!&nbsp;



2) Agora vá em Layout, e abra um novo gadget java/script e dentro dele cole:

&lt;a href="LINK"&gt;&lt;div class="dd1" onmouseover="this.innerHTML='#'"
onmouseout="this.innerHTML='NOME"&gt;NOME&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="dd2" onmouseover="this.innerHTML='NOME'"
onmouseout="this.innerHTML='#'"&gt;#&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="dd1" onmouseover="this.innerHTML='#'"
onmouseout="this.innerHTML='NOME'"&gt;NOME&lt;/div&gt;&lt;/a&gt;
&lt;br /&gt;
&lt;a href="LINK"&gt;&lt;div class="dd2" onmouseover="this.innerHTML='NOME'"
onmouseout="this.innerHTML='#'"&gt;#&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="dd1" onmouseover="this.innerHTML='#'"
onmouseout="this.innerHTML='NOME'"&gt;NOME&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="dd2" onmouseover="this.innerHTML='NOME'"
onmouseout="this.innerHTML='#'"&gt;#&lt;/div&gt;&lt;/a&gt;
&lt;br /&gt;
&lt;a href="LINK"&gt;&lt;div class="dd1" onmouseover="this.innerHTML='#'"
onmouseout="this.innerHTML='NOME"&gt;NOME&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="dd2" onmouseover="this.innerHTML='NOME'"
onmouseout="this.innerHTML='#'"&gt;#&lt;/div&gt;&lt;/a&gt;
&lt;a href="LINK"&gt;&lt;div class="dd1" onmouseover="this.innerHTML='#'"
onmouseout="this.innerHTML='NOME'"&gt;NOME&lt;/div&gt;&lt;/a&gt;



Se desejar uma versão mais simplificada cole esse no lugar:

&lt;div class="dd1"&gt;&lt;a href="LINK"&gt; NOME &lt;/a&gt;&lt;/div&gt;
&lt;div class="dd2"&gt;&lt;a href="LINK"&gt; NOME &lt;/a&gt;&lt;/div&gt;
&lt;div class="dd1"&gt;&lt;a href="LINK"&gt; NOME &lt;/a&gt;&lt;/div&gt;
&lt;div class="dd2"&gt;&lt;a href="LINK"&gt; NOME &lt;/a&gt;&lt;/div&gt;
&lt;div class="dd1"&gt;&lt;a href="LINK"&gt; NOME &lt;/a&gt;&lt;/div&gt;
&lt;div class="dd2"&gt;&lt;a href="LINK"&gt; NOME &lt;/a&gt;&lt;/div&gt;
&lt;div class="dd1"&gt;&lt;a href="LINK"&gt; NOME &lt;/a&gt;&lt;/div&gt;
&lt;div class="dd2"&gt;&lt;a href="LINK"&gt; NOME &lt;/a&gt;&lt;/div&gt;
&lt;div class="dd1"&gt;&lt;a href="LINK"&gt; NOME &lt;/a&gt;&lt;/div&gt;



Arrume onde se pede e salve!