♦ Tutorial ~ Menu Degradê

Hey Pessoal

  Eu estou muito deprimido, estou com vontade de chorar até. Como é que a Suzanne Collins pode matar tantas pessoas que eu amo? Eu mal me recuperei da morte do Lupin e da Tonks e lá vem mais uma duzia de personagens legais morrendo aos montes em um único capítulo de A Esperança, cara o desfecho da trilogia de Jogo Vorazes foi muito bom, mas me deixou muito perturbado.
  Vamos ao assunto do post. Quem viu o layout passado aqui do blog (o vermelho) viu que o menu tinha um efeito degradê que bastante gente gostou, então o vou postar para vocês. Já que ele é difícil pra caramba de editar eu já trouxe 4 modelos diferentes para poderem usar. Um vermelho, um rosa, um azul e um preto. Todos ficam fixos no topo do blog automaticamente e também é fácil de instalar. Let's go.

Vá em MODELO >> EDITAR HTML e procure por </body>

Acima dele cole esse código.

<div id='menu'><div class='menup'>
<a class='mna' href='LINK'>NOME 5</a>
<a class='mnb' href='LINK'>NOME 4</a>
<a class='mnc' href='LINK'>NOME 3</a>
<a class='mnd' href='LINK'>NOME 2</a>
<a class='mne' href='LINK'>NOME 1</a>
</div></div>

.MUITO IMPORTANTE.

  Para trocar os links você tem que fazer debaixo para cima, para que os nomes apareçam em ordem, por exemplo, no último link você coloca o HOME. E não coloque palavras grandes, se não o menu vai sair de ordem.

 ------------------------------ ////------------------------------

Agora é só escolher um modelo e colocar em cima do ]]></b:skin>

/*MENU DEGRADE VERMELHO COMEÇO*/
@import url(http://fonts.googleapis.com/css?family=Denk+One);
a.mne{background:#730a15; padding:10px; border-right:0px solid #730a15; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px; left:60px; width:70px;}
a.mne:hover {border-right:420px solid #730a15; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s;}
a.mnd{background:#8f0d19; padding:10px; border-right:0px solid #8f0d19; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px;left:140px; width:90px; }
a.mnd:hover {border-right:310px solid #8f0d19; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; cursor:pointer;}
a.mnc {background:#b20817; padding:10px; border-right:0px solid #b20817; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px; left:240px; width:90px;}
a.mnc:hover {border-right:210px solid #b20817; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; cursor:pointer;}
a.mnb {background:#d00819; padding:10px; border-right:0px solid #d00819; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px;left:340px; width:90px;}
a.mnb:hover {border-right:110px solid #d00819; -webkit-transition:1s;cursor:pointer;}
a.mna{background:#f80419; padding:10px; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px; left:450px; width:90px;}
#menu{
position:fixed; background:#730a15; padding:0px; height: 50px; width: 748px; left: 0px; top: -1px; border-right: solid 650px #f80419; box-shadow: 0px 0px 0px #0d0d0d;
}
#menu a{font-family: 'Denk One', sans-serif; font-size: 18pt; text-align:center; cursor:pointer; text-decoration:none; color:#ffffff; text-transform: uppercase;}
.menup{ position: absolute; top:-52px; left:350px; }
/*MENU DEGRADE VERMELHO FIM*/

/*MENU DEGRADE AZUL COMEÇO*/
@import url(http://fonts.googleapis.com/css?family=Denk+One);
a.mne{background:#328a96; padding:10px; border-right:0px solid #328a96; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px; left:60px; width:70px;}
a.mne:hover {border-right:420px solid #328a96; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s;}
a.mnd{background:#47a5ae; padding:10px; border-right:0px solid #47a5ae; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px;left:140px; width:90px; }
a.mnd:hover {border-right:310px solid #47a5ae; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; cursor:pointer;}
a.mnc {background:#65bac1; padding:10px; border-right:0px solid #65bac1; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px; left:240px; width:90px;}
a.mnc:hover {border-right:210px solid #65bac1; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; cursor:pointer;}
a.mnb {background:#89cacf; padding:10px; border-right:0px solid #89cacf; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px;left:340px; width:90px;}
a.mnb:hover {border-right:110px solid #89cacf; -webkit-transition:1s;cursor:pointer;}
a.mna{background:#a4d6da; padding:10px; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute;  top:52px; left:450px; width:90px;}
#menu{position:fixed; background:#328a96; padding:0px; height: 50px; width: 748px; left: 0px; top: -1px; border-right: solid 650px #a4d6da; box-shadow: 0px 0px 0px #0d0d0d;}
#menu a{font-family: 'Denk One', sans-serif; font-size: 18pt;  text-align:center; cursor:pointer; text-decoration:none; color:#ffffff; text-transform: uppercase;}
.menup{ position: absolute; top:-52px; left:350px; }
/*MENU DEGRADE AZUL FIM*/

/*MENU DEGRADE ROSA COMEÇO*/
@import url(http://fonts.googleapis.com/css?family=Denk+One);
a.mne{background:#d92b33; padding:10px; border-right:0px solid #d92b33; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px; left:60px; width:70px;}
a.mne:hover {border-right:420px solid #d92b33; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s;}
a.mnd{background:#e23e49; padding:10px; border-right:0px solid #e23e49; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px;left:140px; width:90px; }
a.mnd:hover {border-right:310px solid #e23e49; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; cursor:pointer;}
a.mnc {background:#e95968; padding:10px; border-right:0px solid #e95968; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px; left:240px; width:90px;}
a.mnc:hover {border-right:210px solid #e95968; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; cursor:pointer;}
a.mnb {background:#ee7f8b; padding:10px; border-right:0px solid #ee7f8b; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px;left:340px; width:90px;}
a.mnb:hover {border-right:110px solid #ee7f8b; -webkit-transition:1s;cursor:pointer;}
a.mna{background:#f29da6; padding:10px; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute;  top:52px; left:450px; width:90px;}
#menu{position:fixed; background:#d92b33; padding:0px; height: 50px; width: 748px; left: 0px; top: -1px; border-right: solid 650px #f29da6; box-shadow: 0px 0px 0px #0d0d0d;}
#menu a{font-family: 'Denk One', sans-serif; font-size: 18pt;  text-align:center; cursor:pointer; text-decoration:none; color:#ffffff; text-transform: uppercase;}
.menup{ position: absolute; top:-52px; left:350px; }
/*MENU DEGRADE ROSA FIM*/

/*MENU DEGRADE PRETO COMEÇO*/
@import url(http://fonts.googleapis.com/css?family=Denk+One);
a.mne{background:#000000; padding:10px; border-right:0px solid #000000; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px; left:60px; width:70px;}
a.mne:hover {border-right:420px solid #000000; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s;}
a.mnd{background:#222222; padding:10px; border-right:0px solid #222222; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px;left:140px; width:90px; }
a.mnd:hover {border-right:310px solid #222222; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; cursor:pointer;}
a.mnc {background:#444444; padding:10px; border-right:0px solid #444444; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px; left:240px; width:90px;}
a.mnc:hover {border-right:210px solid #444444; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; cursor:pointer;}
a.mnb {background:#666666; padding:10px; border-right:0px solid #666666; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute; top:52px;left:340px; width:90px;}
a.mnb:hover {border-right:110px solid #666666; -webkit-transition:1s;cursor:pointer;}
a.mna{background:#888888; padding:10px; -webkit-transition-duration:1s; -o-transition-duration:1s; -mox-transition-duration:1s; position:absolute;  top:52px; left:450px; width:90px;}
#menu{position:fixed; background:#000000; padding:0px; height: 50px; width: 748px; left: 0px; top: -1px; border-right: solid 650px #888888; box-shadow: 0px 0px 0px #0d0d0d;}
#menu a{font-family: 'Denk One', sans-serif; font-size: 18pt;  text-align:center; cursor:pointer; text-decoration:none; color:#ffffff; text-transform: uppercase;}
.menup{ position: absolute; top:-52px; left:350px; }
/*MENU DEGRADE PRETO FIM*/