18/03/2014

Tutorial - Menu em cortininha (Menu Tracks)



Ois ois ois! \0/
Lembram-se deste menu no Animes Espectaculares?

Foi quando a Camii-chan fez este excelente design pro meu bloguinho, qui fofi :3
Obigada mais uma vez Camii-chan >-<


Pois é... o tuto estava no Kawaii World, porém esse blog meio que está confuso e sem os tutoriais antigos, então decidi postar o tutorial para as pessoas que quiserem este tutorial não morrerem de desespero logo que não encontrem o tuto... (Eu quase morri para o encontrar, mas por sorte tinha o HTML do design com este menu e encontrei o código hohoho~)

Vamos lá então...
Vá a design, Modelo, HTML e aperte CTRL F e procure por </header>
E depois desse código cole:
<div style='top: 0px; height: 30px; width: 100%; z-index: 4; background: #7cabf6 position: fixed; left: 0px; text-align: center; '>
<div style='position: absolute; top: -15px; width: 900px; text-align: center !important; float: center !important; '>  <ul id='nav'>
  <li><a href='LINK 1'>NOME 1</a></li>
  <li><a href='LINK 2'>NOME 2</a></li>
  <li><a href='LINK 3'>NOME 3</a></li>
  <li><a href='LINK4'>NOME 4</a></li>
  <li><a href='LINK 5'>NOME 5</a></li>
  <li><a href='LINK 6'>NOME 6</a></li>
  <li><a href='LINK 7'>NOME 7</a></li>
</ul></div> </div>

Depois procure por </head>
E depois desse código coloque:
<style type='text/css'>
ul#nav { width: 1500px; margin: 0 auto; text-align: center !important; overflow: hidden;}
ul#nav li {float: left; list-style: none; align: center;}
ul#nav li a{display: block; width: 110px; height: 90px; padding: 20px 0 0 0; margin-right: 30px; margin-left: 5px; font: bold 17px &#39;Audiowide&#39;; text-transform: uppercase; color: #fff !important; text-shadow: 0 1px 3px #636161; text-decoration: none; background: url(LINK DA IMAGEM DA FAIXINHA) 0 -149px no-repeat; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.9s ease-out;
}
ul#nav li a:hover { background: url(URL DA IMAGEM) 0 0 no-repeat;color: #E4D9EE; text-shadow: 0 2px 3px #4c2225; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}
ul#nav li a.js:hover {background: url(URL DA IMAGEM) 0 -149px no-repeat; -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}
</style>

Pronto, onde diz "LINK DA IMAGEM DA FAIXINHA" substituam, simples, nao?
Pré-visualizem e vejam se está tudo bem ;)
Agora algumas faixinhas que eu fiz e que podem usar:

    

Já sabem, se usarem creditem ;)

Kissu, Bunny~

10 comentários:

  1. Oláaaa!
    como vai amigaaa?
    eu fico muito animada quando vejo tutos!
    Adorei esse! ^^
    saiu um novo post lá,com uma nova tirinha^^
    venha ler:
    http://gliter-lovely.blogspot.com.br/

    bjuuus!

    ResponderExcluir
  2. Acho que no proximo lay eu vou usar esse tuto ficou muito bom e tava procurando como coloca esse menu faz meses
    kissus You Like?

    ResponderExcluir
  3. Bunny, quanto tempo em...
    Eu não estava com muito tempo para passear pela blogosfera,mas como eu terminei um bocado das coisas que eu tinha para fazer, estou de volta a blogosfera \o/\o/\o/\o/\o/\o/.
    O tuto ficou muito bom, fácil entendimento.
    Ah... Adorei o lay que você fez para o Projeto Senbonzakura.

    Abraço.
    Espaço Otaku

    ResponderExcluir
  4. Olá Bunny!
    Adorei esse tutorial e se usar darei créditos^^
    Olha, o fundo que pedis-te é o fundo do blog ou de outro.
    Não entendi la muito bem.

    Kiss

    ResponderExcluir
  5. Ameeeei *----*
    seu Layout é muito lindo
    http://fillisbrack.blogspot.com.br/

    ResponderExcluir

Se queres comentar:
☾ Nada de palavras indecentes!
☾ Se eu te conhecer, no comentário anónimo podes assinar no fim, por favor?^^
☾ Se quiseres falar comigo no msn podes adicionar:
bunnytsukino5@hotmail.com
☾ Diverte-te e comenta sempre que quiseres!

©