Menu pendente

Tal como prometido, segundo post de hoje ^^ Os restantes demorarão um pouco mais a ser postados, ainda os estou a preparar, mas o que importa é que até ao fim do dia o blog receberá várias atualizações. Trago 4 modelos que utilizam uma imagem como fundo, mas sintam-se livres para colocar cor sólida e fazer as alterações que desejarem - o menu pedente é um menu que suporta vários links comprimidos/ocultos numa única barrinha, e que os mostra ao clica nela, apresentando-os na vertical. Enfim, a prévia está aí para mostrar. Não retirei o tutorial de exatamente lugar nenhum, apenas peguei [neste layout free] e usei Ctrl + U para ver a base, e inventei personalizações que ficariam feiosas se aplicadas diretamente no gadget HTML/javascript, como estavam no tutorial original. É por isso que acho razoável ficar com os créditos.

Prévia: www

Tutorial

Abra o HTML do seu blog e use Ctrl+F para procurar por /b:skin. Em cima, acrescente o código do modelo que desejar.

Modelo 1:

.pendente1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI-zw_apMeJd1iiw9Heyag2g0izX70vG9pCBR9xQXK4NYNf0h_ZtVlEPuAEv6mTzFRGeK63yCVm3GJGcrLFOoy701F43T1w4DagzNte5z3I4SNdMHYCUQ8vBLDaafzKGSRC43XisxihUM/s1600/fundoa3.png) no-repeat;
border-radius: 5px;
border: 5px solid rgba(255,255,255,1.0);
box-shadow: none;
margin-top: 1px;
width: 100px;
height: 26px;
text-align: left;
color: #fff;
text-shadow: none;
font-size: 11px;
font-family: Muli;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.pendente1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI-zw_apMeJd1iiw9Heyag2g0izX70vG9pCBR9xQXK4NYNf0h_ZtVlEPuAEv6mTzFRGeK63yCVm3GJGcrLFOoy701F43T1w4DagzNte5z3I4SNdMHYCUQ8vBLDaafzKGSRC43XisxihUM/s1600/fundoa3.png) no-repeat;
box-shadow: inset 0px 8px 0px #fff, inset 0px -8px 0px #fff;
color: #bd8ab8;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Modelo 2:

.pendente2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAeI6OSWfKi0AqZvUWimK2DRIJkqEQvY1Fdswyw9-Ghs2XtuPukzl7jUC9OC0m-DmT9n-wrY170fxlD6bH5hA7DkDbVNVchaMI3QTiCcmm9INSl40aWaL3SdXymXo24aOlI1M21evhURk/s1600/fundoa1.png) no-repeat #bc78c2;
border-radius: 5px;
border: 5px solid rgba(255,255,255,0.4);
box-shadow: inset 0px 0px ;
margin-top: 1px;
width: 100px;
height: 26px;
text-align: left;
color: #fff;
text-shadow: none;
font-size: 11px;
font-family: Muli;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.pendente2:hover {
background-position: 0px -16px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Modelo 3:

.pendente3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_TaWZ3tZaaSyLb-41ly4oDAeWxdF8ePWJasRe2YkZ7_s2ftN6MqQIG99kZHGOt5B88l5vt7CYyu_U0Ykpj7ldn3UElYYQ_NCP5eLvNJSeMUmb1oorS-8fOdWtiiANYYQcSUKI0xt8LMY/s1600/fundoa2.png) no-repeat #ffa159;
border-radius: 5px;
border: 5px solid rgba(255,255,255,1.0);
box-shadow: none;
margin-top: 1px;
width: 100px;
height: 26px;
text-align: left;
color: #fff;
text-shadow: 1px 1px 0px #faa06b, -1px -1px 0px #faa06b;
font-size: 11px;
font-family: Muli;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.pendente3:hover {
background-position: 0px -16px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Modelo 4:

.pendente4 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yWsbXw8vDdMvD91gkE1I8t3Y2ruyKj-ULyXFx0_dvgrKpkFn9m3JTDQSFOTcoZu3DCvAN90exM1f67ufmLwQDh8quYdmVl_ZMfknDCcN6Kpul_Ld53-LyiqUh_0HnlapU-8jSbNPDhM/s1600/fundoa4.png) no-repeat;
border-radius: 5px;
border: 5px solid rgba(255,255,255,0.4);
box-shadow: none;
margin-top: 1px;
width: 100px;
height: 26px;
text-align: left;
color: #fff;
text-shadow: 1px 1px 0px #faa06b, -1px -1px 0px #faa06b;
font-size: 11px;
font-family: Muli;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.pendente4:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yWsbXw8vDdMvD91gkE1I8t3Y2ruyKj-ULyXFx0_dvgrKpkFn9m3JTDQSFOTcoZu3DCvAN90exM1f67ufmLwQDh8quYdmVl_ZMfknDCcN6Kpul_Ld53-LyiqUh_0HnlapU-8jSbNPDhM/s1600/fundoa4.png) no-repeat;
box-shadow: inset 0px 8px 0px #fff, inset 0px -8px 0px #fff;
color: #faa06b;
text-shadow: none;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

Agora, vá a "Esquema" e cria um gadget HTML/Javascript, colando dentro este código:

<div style="margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px;">
<form><select onchange="window.open(this.options[this.selectedIndex].value)"class="pendente1" name="links">
<option selected/>✎ TÍTULO
<option style="" value="LINK"/>NOME
<option style="" value="LINK"/>NOME
<option style="" value="LINK"/>NOME
<option style="" value="LINK"/>NOME
</select></form></div>

Basta trocar o nome do menu - mais concretamente, o número a negrito - pelo número correspondente ao modelo que escolheu. Se quiser usar ao mesmo tempo vários menus pendentes no mesmo gadget, é só repetir o código e usar as margens na primeira linha de cada conjunto para deslocar o menu para onde quiser.

Voilá.