Blog da Ketty: Tutorial: Menu Degradê

sexta-feira, 11 de dezembro de 2015

Tutorial: Menu Degradê


Ola minhas queridas e queridos ^^ Estou muito feliz com as visitas aqui no blog, e um aumento de seguidores, e comentários, fiquei super feliz em responde-los. E isso me incentiva mais ainda a fazer post's legais para vocês. Mas indo ao tutorial de hoje, ele é super fácil, mas leva uns minutinhos, porém não achei nada difícil. Apenas preste atenção nos links...
Vamos lá então


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

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

E é isso pessoal, achei super simples e fácil esse Tutorial, vou procurar fazer ele, e colocar no blog. Espero que gostem e os créditos dos menus deixo para o  Blog Chá & Cupcake.
Beijooooos





2 comentários:

  1. Amei o tutorial e o seu blog, mega fofo!! Já estou seguindo linda, bjinhos
    http://duranteos16.blogspot.com.br/

    ResponderExcluir

Olá que bom que veio comentar aqui no Blog da Ketty!

-Sem chingamentos;
-Leio os comentários de crítica construtiva sempre;
-Deixe o link do seu blog;
-Se for reblogar deixe um aviso.

-Agradeço a atenção. Ketty.