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á.

3 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
  2. I like the post format as you create user engagement in the complete article. It seems round up of all published posts. Thanks for gauging the informative posts.
    cara menggugurkan kandungan

    ResponderEliminar