♦ 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*/

18 comentários:

  1. Byel eu te mato!!!! Tantos spoilers em um post só!! *chorando*

    Esse menu é bem legal, eu adorava ficar passando o mouse em cima dos links no último lat hehe'

    ResponderExcluir
    Respostas
    1. Não me culpe, culpe os autores, rsrsrsrs.
      Eu também gostava, mas ficava com raiva quando queria ir do home pro tuto, porque tinha que esperar a sombra sair de cima dele, rsrsr

      Excluir
  2. Nossa, os menus são lindos e fico até feliz por ter disponibilizado... Vou estar tentando colocar em algum layout, e se ficar legal darei muitos créditos por este menu perfeito! <3

    ResponderExcluir
    Respostas
    1. Obrigado ^^
      Espero que goste de usar, porque deu um trabalhinho, rsrsr. Ohh créditos são legais, rsrsrs.

      Excluir
  3. Esse menu é muito lindo, e criativo *3*

    htmlandresources.blogspot.com

    ResponderExcluir
  4. Que bom que você disponibilizou, estava mesmo querendo!

    Sweet of Cherry

    ResponderExcluir
  5. Cara. Cara. Cara. Que layout é esse, me diz?!
    Que coisa mais linda Byeeeeel!! Sério, amei cada pedacinho, cada pixel daqui ≧▽≦ ~!
    Tudo bem que todos sabem que os layouts que você faz são lindos, mas esse foi assim de cativar o coração ;u;. ~eu me derretendo por nada mais nada menos que uma junção de códigos -q~
    Só aviso que depois, se não se importar é claro, vou pedir um monte de tutoriais relacionados a coisinhas que você fez aqui ook?

    Enfim, deixando isso de lado (porque em algum momento acho que falar do conteúdo do post é importante -q) o menu é muito legal. É simples, mas dá um "que" a mais no layout. Bem lindinho ~ :3

    Bem, vou indo.
    Atéees ♥

    ResponderExcluir
    Respostas
    1. Caramba quantos elogios, sei nem o que responder. Sei nem se vou ter coração para responder tudo isso.
      Elogios assim faz com que qualquer um fique feliz á toa, caramba isso me motiva muito a continuar com esses lays que eu faço, rsrsrs, e olha que eu nem curto muito os meus lays, mas tudo bem sou sempre pessimista.
      Pode pedia o que quiser que disponibilizarei depois.
      Valeu por ter gostado do menu e ter falado do post, rsrsrsrs.
      Bye bye

      Excluir
    2. Ah nem foram tantos assim, dava pra falar tanta coisa ainda c: .
      Bem, que continue assim sempre super motivado~ Afinal, os elogios condizem com a verdade.
      Hahaha pessimismo corre pela veia de quase todas as pessoas que tem talento, só falando u.u. Maaas, se quiser mudar e se tornar um pouquinho mais positivo com relação ao que faz, também funciona :3.
      Pedirei então, mocinho ~ Só que... Sei lá, vergonha de pedir tutoriais, sempre espero lerem minha mente e disponibilizarem sabe (Até que funciona, só demora um pouco mais, hahahaha) -qqq.

      Imagina, em algum momento eu tinha que comentar sobre o assunto real do post né? Fica feio não falar nada de um tutorial bacana.

      Atés outra vez ~

      Excluir
  6. Muahaha, ainda bem que para mim o que você disse não é spoiler, porque eu já li os livros há imenso tempo >.< Enfim, você sabe que eu estou apaixonada por este menu desde que você o usou no lay anterior? :3 Embora não saiba quando o vou usar, nem se o usaria exatamente igual. Mas perfeito, sempre quis aprender a fazer ^^

    Forever Sapo

    ResponderExcluir
    Respostas
    1. Ufa, agora tenho alguém para me desabafar, porque tudo que aconteceu ali foi muita maldade.
      Sim sim, você sempre está acompanhando o blog e elogiando tudo ^u^.
      Tudo terá seu tempo, rsrsrsr, o tuto sempre estará aqui, (espero).

      Bye bye

      Excluir
  7. Eu sei bem como é,a Suzane e muito má,ela e o Rick combinam na hora de matar personagens,e eles só escolhem personagens perfeitos!! :"( Eu amo esse menu! Tava louca pra poder usar,mas eu já to usando outro,da próxima eu uso ;)
    Obs: Layout divo!!!~babando arco-íris~

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Nunca li Percy, mas meu amigo contou que ele também mata muitos personagens legais. Vi no google imagens que os dois parecem amigos. Só pode, é muita maldade para alguem sozinho.
      Esperar um pouquinho não faz mal, rsrsrs.

      Excluir
  8. Eu infelizmente só vi até agora o filme "Jogos Vorazes", e amei, mas agora eu quero ler os livros, pois para mim é meio que mais interessante. E este menu é muito perfeito! Lembro da vez que passei aqui e vi ele, na hora meus olhos brilharam, pois ele é muito inovador e único. Abraços ~

    Loucuras do Thonn

    ResponderExcluir
    Respostas
    1. Os livros são muito mais interessantes que qualquer filme, pois eles guardam muito mais detalhes. Dos filmes eu também só vi Jogos Vorazes, queria muiiiiiiiito ir ver Em Chamas, mas não vai dar.
      Nyahh, obrigado. Ele nem é tudo isso não, rsrsrsrs,

      Excluir
  9. Não tem como fazerem um código com um verde parecido com o que vocês usam no blog de vocês?

    ResponderExcluir