19.8.16

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://1.bp.blogspot.com/-j5BRE5VdL7Q/VyOwbCexGMI/AAAAAAAAtFg/xRkysxDvsw8O65c-DMTnOmJZayKMBvt5ACLcB/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://1.bp.blogspot.com/-j5BRE5VdL7Q/VyOwbCexGMI/AAAAAAAAtFg/xRkysxDvsw8O65c-DMTnOmJZayKMBvt5ACLcB/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://4.bp.blogspot.com/-enphDkKTc2Q/VyOwbCkXDPI/AAAAAAAAtFc/3HDPDfIOhWwkkF82EcBrE1EnY3QYUUIcwCLcB/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://3.bp.blogspot.com/-l4BRCXBDyZU/VyOwbDlGmEI/AAAAAAAAtFk/AzX9LV9orD4hRuWvoXutQ48iashCizEfQCLcB/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://1.bp.blogspot.com/-UqQRu6eXzUk/VyOwbUDX_uI/AAAAAAAAtFo/zeUfBz-NjtgbPw-33-7FPOZqI9RuzDaAQCLcB/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://1.bp.blogspot.com/-UqQRu6eXzUk/VyOwbUDX_uI/AAAAAAAAtFo/zeUfBz-NjtgbPw-33-7FPOZqI9RuzDaAQCLcB/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á.

2 comentários:

  1. Oii Any <33
    Meu deus, esse menu é muito lindo <33 eu me apaixonei por ele no instante em que tu colocou no FS *-* e sabe qual o tutorial que eu achei aqui? O daquele menu dropdown fabuloso que tu fez <33 vou usar esses menus todos nos meus layouts, porque meu deus sou apaixonada por menus alternativos <33
    Sayonara :3

    ResponderEliminar