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.