Menu Bracket

Oi gente! esse tutorial eu montei em cima de dois outros tutoriais um é de blog So Kawai, nosso parceiro, e outro é do Tympanus/Crodops um site de tutoriais muito bom. Confira o resultado e o tutorial abaixo:

RESULTADO.

1 - Cole esse código no seu css;
Wordpress: Aparencia> editor> Folha de estilo (style.css)
Blogger: Procure a tag ]]><b:/skin> e cole antes da tag.

nav {width: 100%; height: 45px; background: #c1d6d6;  position:fixed;}
nav a {
 position: relative;
 display: inline-block;
 margin: 15px 25px;
 outline: none;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-weight: 400;
 text-shadow: 0 0 1px rgba(255,255,255,0.3);
 font-size: 1.20em;
        font-family:arial;
}

nav a:hover,
nav a:focus {
 outline: none;
}

/* Effect 1: Brackets */
.cl-effect-1 a::before,
.cl-effect-1 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;
}

.cl-effect-1 a::before {
 margin-right: 10px;
 content: '[';
 -webkit-transform: translateX(20px);
 -moz-transform: translateX(20px);
 transform: translateX(20px);
}

.cl-effect-1 a::after {
 margin-left: 10px;
 content: ']';
 -webkit-transform: translateX(-20px);
 -moz-transform: translateX(-20px);
 transform: translateX(-20px);
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
 opacity: 1;
 -webkit-transform: translateX(0px);
 -moz-transform: translateX(0px);
 transform: translateX(0px);
}
.color-1 {
 background: #435a6b;
}

2 -Coloque esse código onde você quer apareça:

<section class="color-1">
    <nav class="cl-effect-1">
     <a href="#">HOME</a>
     <a href="#">TUTORIAIS</a>
     <a href="#">EXTRA</a>
     <a href="#">ASK</a>
     <a href="#">CONTATO</a>
    </nav>
   </section>

Créditos: So Kawai pela barra. Tympanus pelo menu. Sugoi Tutoriais pelo tutorial.