Menu Bracket

 Por: Lalalalala    11:55  HTML, menu, tutorial   Sem Comentarios

Olá amores queria me desculpar pelo sumiço, essa semana tem sido muito corrida tanto pra mim como pra Looh, nós duas estamos cheias de coisa dá escola, e ainda mais eu estou fazendo curso, e estudando desde já para o Enem, psé. Mas agora que já me organizei e sei os horários que vou ter de folga vai ficar mais fácil de ter tempo pra postar.

Bom sobre o tutorial eu peguei no Sugoi Tutoriais, então os créditos vão pra lá.

Preview

Vá em editar html e procure por ]]><b:/skin>

e acima dele cole 

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;
}

Em seguida cole o código abaixo aonde quer que apareça o menu.

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