15.7.15

Menu colchete


Já há muito tempo que andava à procura deste tutorial, mas mesmo não o tendo encontrado em lado nenhum, consegui retirá-lo de um blog (que já não recordo) utilizando Ctrl + U. Menu colchete - ou chaveta, como são chamadas em Portugal: Consiste num menu simples em que as palavras/itens estão pousadas em cima de uma imagem de fundo ou de uma barrinha, e em que, ao passar o mouse, aparece uma chaveta de cada lado das palavras. A chaveta aparece vinda por trás das mesmas, e vai adquirindo maior opacidade. É um menu que trabalha com as palavras-chave before e after, portanto talvez seja melhor não mudarem nada além das cores e da largura do menu.

[adicionado mais tarde: CRÉDITOS AO GNMH! Não sabia quando postei, gómen! Parece então que só o modelo final é meu]

Prévia: www

Tutorial

No HTML do vosso blog, procurem por /b:skin e adicionem o código seguinte em cima:
.colchete { /*barra do fundo*/
width: 400px; /*largura da barra do fundo*/
background: #ede0dd;
box-shadow: inset 0px 0px 2px #e3cdc8;
border-radius: 3px;
padding: 2px 2px 2px 2px;
line-height: 15x;
float: center;
text-align: center;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.colchete:hover { /*barra do fundo ao passar o mouse*/
background: #ebcfce;
box-shadow: inset 0px 0px 2px #e0b9b8;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.colchete a { /*fonte do menu*/
color: #fff!important;
font-size: 11px;
font-family: Muli;
text-decoration: none;
text-shadow: 1px 1px 1px #e0b9b8;
}
.colchete a::before, .colchete a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s,
opacity 0.2s;
-moz-transition: -moz-transform 0.3s,
opacity 0.2s;transition: transform 0.3s,
opacity 0.2s;
}
.colchete a::before { /* troque o símbolo da chaveta da terceira linha se quiser*/
margin-right: 2px;
content: '{';
-webkit-transform: translatex(20px);
-moz-transform: translatex(20px);
transform: translatex(20px);
}
.colchete a::after { /* troque o símbolo da chaveta da terceira linha se quiser*/
margin-left: 2px;
content: '}';
-webkit-transform: translatex(-20px);
-moz-transform: translatex(-20px);
transform: translatex(-20px);
}
.colchete a:hover::before,.colchete a:hover::after,.colchete a:focus::before,.colchete a:focus::after {
opacity: 1; -webkit-transform: translatex(0px); -moz-transform: translatex(0px);transform: translatex(0px);
}
Agora, vão a esquema e adicionem o código seguinte num gadget HTML/Javascript:
<div style="image-align: center; margin-bottom: 0px; margin-left: 0px; margin-top: 0px;">
<br />
<nav class="colchete">
<a href="/">NOME</a>
<a href="/">Nome</a>
<a href="/">nome</a>
<a href="/">nomE</a>
<a href="/">NOME</a>
</nav></div>

Como bónus, trago aqui o modelo que eu mesma usei, por ser mais elaborado do que ensinei em cima :)
  • Prévia: www {por baixo do gadget de welcome}
  • Código do HTML: www
  • Código do gadget: www

Era isso :) Realmente peço desculpa por não saber que blog é que estava a usar este tutorial para eu mesma aprender a fazê-lo, e espero que tenham gostado do menu.


3 comentários:

  1. Olá Anilyan! Eu já conhecia esse menu, o efeito dele é bastante lindo. >3<

    Studio-Help.blogspot.com.br

    ResponderEliminar
  2. Olá tudo bem? Então, este menu é de autoria minha pois postei ele a alguns dias, ficaria muito feliz se me creditasse pois todos os códigos são meus, nada contra se quer repostar mas ficaria muito agradecida se colocasse os devidos créditos ;) Aguardo Roh do blog GNMH

    ResponderEliminar
    Respostas
    1. Oh, não fazia ideia, é que nunca tinha encontrado! Vou colocar os créditos agora mesmo, desculpe por isso e obrigada por ter sido tão compreensível :)

      Eliminar