Tutorial - Menu cortina

Hello !

Bom, agora estou trazendo um tutorial que eu achei no Sugoi Tutoriais.

Preview aqui

Quer aprender?! Clique em Leia Mais e confira o tutorial ;)

- Vá em modelo - editar HTML;

-Procure por: ]]></b:skin> ;

-Cole o código abaixo antes da tag;

ul,li{

margin:0;

padding:0;}

ul{

h:500px; /* aqui você muda a largura da barra do menu */ mar

widtgin:auto; height:55px; /* altura do menu /*

rflow:hidden; } li{ float:left;

background:#004008; /* cor do menu /* ov e list-style:none; } li a{ display:block; width:125px; line-height:3.44;

background:-moz-li

text-align:center; color:#fff; text-decoration:none; font-size:16px;

t(linear,left top, left bottom ,from(#D4ED6F),to(#D4ED

near-gradient(top,#D4ED6F,#D4ED6F); /* cor do hover /* background:-webkit-gradie n6F)); /* cor do hover /* background:linear-gradient(top,#D4ED6F,#D4ED6F); /* cor do hover /* background-repeat:no-repeat;

ransition:background-position .2

background-position:0 -55px; -moz-transition:background-position .2s; -webkit-transition:background-position .2s; ts; } li a:hover{ background-position:0 0;

}

color:#004008 */ cor da fonte do hover / * margin:0;

padding:0;}

padding:0;}
ul{ h:500px; /* aqui você muda a largura da barra do menu */
mar
widtgin:auto;height:55px; /* altura do menu /* rflow:hidden;
}
li{
float:left;
background:#004008; /* cor do menu /* ove list-style:none;}li a{ display:block; width:125px;line-height:3.44; background:-moz-li
text-align:center; color:#fff; text-decoration:none; font-size:16px; t(linear,left top, left bottom ,from(#D4ED6F),to(#D4ED
near-gradient(top,#D4ED6F,#D4ED6F); /* cor do hover /* background:-webkit-gradien6F)); /* cor do hover /* background:linear-gradient(top,#D4ED6F,#D4ED6F); /* cor do hover /*background-repeat:no-repeat; ransition:background-position .2
background-position:0 -55px; -moz-transition:background-position .2s; -webkit-transition:background-position .2s; ts;} li a:hover{ background-position:0 0; }
color:#004008 */ cor da fonte do hover /*

-Coloque este código onde quer que apareça:

<ul> <li><a href="#">Home</a></li> <li><a href="#">Serviços</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contato</a></li> </ul>

Créditos: Eduardo Matos Tutorial modificado por: Sugoi Tutoriais

/Saah