sábado, 26 de janeiro de 2013

Tutorial: Menu cute simplicity

Tumblr_lakravem0y1qal6kwo1_1280_large
Fazia tempo que eu não postava um tutorial aqui né?!  Sentiram saudades - digam que sim õ/ - 
Olhando minha página de goodies percebi que os menus estão em falta, o que é uma pena  porque eu adoro editar menus e tals... Prometo que vou atualizar mais a página de goodies, afinal ela é a mais visualizada do blog *--* mas por hoje eu vou ensinar vocês a fazerem esse menu:


Bonitinho né?! Gente o menu original é esse aqui www eu apenas fiz uma edição básica, antes de postar aqui . Clique em leia mais e confira o tutorial... 

Antes de ]]></b:skin> cole isso:
.menu,.menu ul,.menu li,.menu a { margin: 0;padding: 0;border: none;outline: none;}.menu {height: 50px;width: 890px;margin-top:50px;background: transparente;-webkit-border-radius: 4px; -moz-border-radius:4px;border-radius: 4px;}.menu li {position: relative;list-style: none;float: left;display: block;height: 40px;}.menu li a {display: block;padding: 0 14px;margin: 6px 0;line-height: 28px;text-decoration: none;border-left: 0px dashed #393942;border-right: 0px dashed #4f5058;font-family: 'Quicksand', sans-serif;font-weight: bold;font-size: 18px;color: #bebebe; text-shadow: 0px 0px 0px rgba(1,1,1,.6);-webkit-transition: color .2s ease-in-out;-moz-transition: color .2s ease-in-out;-o-transition: color .2s ease-in-out;-ms-transition: color .2s ease-in-out;transition: color .2s ease-in-out;}.menu li:first-child a { border-left: none; }.menu li:last-child a{ border-right: none; }.menu li:hover >a { color: #FFC0CB; }.menu ul {position: absolute;top: 30px;left: 0;opacity: 0;background: #1f2024;-webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;-webkit-transition: opacity .25s ease .1s;-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;}.menu li:hover > ul { opacity: 1; }.menu ul li {height: 0;overflow: hidden;padding: 0;-webkit-transition: height .25s ease .1s;-moz-transition: height .25s ease .1s;-o-transition: height .25s ease .1s;-ms-transition: height .25s ease .1s;transition: height .25s ease .1s;}.menu li:hover > ul li {height: 36px;overflow: visible;padding: 0;}.menu ul li a {width: 100px;padding: 4px 0 4px 40px;margin: 0;border: none;border-bottom: 1px solid #252525;}.menu ul li:last-child a { border: none; }.menu a.me { background: url(http://media.tumblr.com/tumblr_m6lxchb1NV1rrzsji.gif) no-repeat 15px center; }.menu a.site { background: url(http://media.tumblr.com/tumblr_m6lxbxXWb21rrzsji.gif) no-repeat 15px center; }.menu a.ask { background: url(http://media.tumblr.com/tumblr_m6lxazb2xS1rrzsji.gif) no-repeat 15px center; }.menu a.submit { background: url(http://media.tumblr.com/tumblr_m6lxaqkdfE1rrzsji.gif) no-repeat 15px center; }
.menu,.menu ul,.menu li,.menu a { margin: 0;padding: 0;border: none;outline: none;}.menu {height: 50px;width: 890px;margin-top:50px;background: transparente;-webkit-border-radius: 4px; -moz-border-radius:4px;border-radius: 4px;}.menu li {position: relative;list-style: none;float: left;display: block;height: 40px;}.menu li a {display: block;padding: 0 14px;margin: 6px 0;line-height: 28px;text-decoration: none;border-left: 0px dashed #393942;border-right: 0px dashed #4f5058;font-family: 'Quicksand', sans-serif;font-weight: bold;font-size: 18px;color: #bebebe; text-shadow: 0px 0px 0px rgba(1,1,1,.6);-webkit-transition: color .2s ease-in-out;-moz-transition: color .2s ease-in-out;-o-transition: color .2s ease-in-out;-ms-transition: color .2s ease-in-out;transition: color .2s ease-in-out;}.menu li:first-child a { border-left: none; }.menu li:last-child a{ border-right: none; }.menu li:hover >a { color: #FFC0CB; }.menu ul {position: absolute;top: 30px;left: 0;opacity: 0;background: #1f2024;-webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;-webkit-transition: opacity .25s ease .1s;-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;}.menu li:hover > ul { opacity: 1; }.menu ul li {height: 0;overflow: hidden;padding: 0;-webkit-transition: height .25s ease .1s;-moz-transition: height .25s ease .1s;-o-transition: height .25s ease .1s;-ms-transition: height .25s ease .1s;transition: height .25s ease .1s;}.menu li:hover > ul li {height: 36px;overflow: visible;padding: 0;}.menu ul li a {width: 100px;padding: 4px 0 4px 40px;margin: 0;border: none;border-bottom: 1px solid #252525;}.menu ul li:last-child a { border: none; }.menu a.me { background: url(http://media.tumblr.com/tumblr_m6lxchb1NV1rrzsji.gif) no-repeat 15px center; }.menu a.site { background: url(http://media.tumblr.com/tumblr_m6lxbxXWb21rrzsji.gif) no-repeat 15px center; }.menu a.ask { background: url(http://media.tumblr.com/tumblr_m6lxazb2xS1rrzsji.gif) no-repeat 15px center; }.menu a.submit { background: url(http://media.tumblr.com/tumblr_m6lxaqkdfE1rrzsji.gif) no-repeat 15px center; }
Agora cole o próximo código ACIMA de </head> 
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'/>
 Visualize se o template não tiver com nenhum erro salve (:
 Onde você quer que o menu apareça cole isso:
<ul class="menu"><li><a href="LINKINÍCIO">Início</a></li><li><a href="#">Sobre</a><ul><li><a href="LINKPERFIL" class="me">Perfil</a></li><li><a href="LINKFAQ" class="site">FAQ</a></li></ul></li><li><a href="#">Tutoriais</a><ul><li><a href="LINKPARABLOG" class="ask">para blog</a></li><li><a href="LINKOUTROS" class="submit">outros</a></li></ul></li><li><a href="link">Textos tag</a></li><li><a href="LINK">Outro link</a></li><li><a href="LINK">E outro</a></li></ul>
 Entendendo:
Em vermelho: É o nome dos links que aparecem no menu, pode alterar se quiser...
Em azul: Você deve colocar os links de início, faq e etc... Cuidado pra não tirar as aspas do lado " , caso contrario o menu não irá funcionar.
Em verde: É o nome dos links que aparecem no submenu, pode alterar se quiser...
Em laranja: É os links do submenu...

Espero que tenham gostado do tutorial de hoje, daqui a pouco eu vou postar uma
seleção de efeitos legais então fiquem de olho! beijus <3

41 comentários :

  1. Que legal! Nunca vi um menu assim antes! Muito fofo Jackie *o* Quem sabe no próximo Lay eu uso?! KKKK' :3

    Bjs ^_^

    ResponderExcluir
  2. ooi, Jackie como sempre arrasando nos posts!
    Gostei mt !
    Aaah fiz um novo blog dá uma passadinha lá, e se puder e quiser segue-lá!
    Já estou seguindo o seu !
    2beeijos!
    http://kissyou-mi.blogspot.com.br/

    ResponderExcluir
  3. Adorei Jackie, há tempos estou procurando um menu assim! Eu amoooo seu blog, é tudo tão lindo. Parabéns pelo seu lindo blog e seus maravilhosos tutoriais! Beijos!

    ResponderExcluir
  4. Lovei esse menu!Quando eu fizer a próxima reforma do Strela vou usar *o*
    Ah Jackie coloquei seu blog lá no meu menu de divulgação...Tem problema?Adoroo seu blog *o*
    Beijinhos da Princess

    ResponderExcluir
  5. Amei o menu, fica bem fofo no blog.. No próximo layout irei usá-lo c:

    Remember December ~

    ResponderExcluir
  6. Q CÓDIGO GIGANTE!! Adorei o menu, muito lindo, mais prefiro os mais "enfeitados"
    Beijokass
    Fer --> RetardadasDaNet.blogspot.com
    Twitter: @RetardadasDaNet

    ResponderExcluir
  7. Senti falta de um menu também!
    Achei lindo, talvez use no próximo lay!

    Retribui?
    http://meninablogueiratutoriais.blogspot.com.br/

    ResponderExcluir
  8. fiz buttons do Rilakkuma confere la ;) , muito fofo o menu, lindo parabéns !! . www.mymomentsz.blogspot.com

    ResponderExcluir
  9. Super lindo, Jackie! Ameiiiii! Já copiei para meu próximo layout. hehehehehe... Beijão, Linda!

    http://solteiras-noivas-casadas.blogspot.com.br/

    ResponderExcluir
  10. Awn que cute *---* talvez eu use em um layout futuro :D

    Beijos,
    http://palace-ofg.blogspot.com.br/

    ResponderExcluir
  11. O menu é lindo, vou usar *_*
    CAT GIRL

    ResponderExcluir
  12. Adorei o menu. Talvez, eu use em meu próximo layout!

    kisses!

    The Fun Day!

    ResponderExcluir
  13. Que menu lindo! *-*
    Diferente da maioria que estão por aí, achei muito legal, simples de fazer até *--*
    Beijos~

    myacidblackcherry.blogspot.com

    ResponderExcluir
  14. Cara que tutu fofo! Muito bonitinho você ainda explicar tudo com as cores HAHA' Adorei :D
    Beeijinhos

    ResponderExcluir
  15. Ai que lindo que fica,amei jackie!
    Paixonitedemenina.blogspot.com

    ResponderExcluir
  16. Simples e bonito rs

    princess-intheclouds.blogspot.com

    ResponderExcluir
  17. Ameeeeeeii Jackie!
    bom sabadooo pra vc beijos
    lilica l.

    ResponderExcluir
  18. OMG! Que menu fofo *--*
    Parece um pouquinho complicado,mas é perfeito *u*
    Kiss :3
    todadelicada.blogspot.com

    ResponderExcluir
  19. oiii querida, sabe, fiz curso de computação grafica e tudo mas não sou webdesign... tipo, boiei no seu post... HUAHAUHAUAHAU... primeira vez q me acontece isso em termos interneticos, ja mexi em html e tudo mas não sei o que é menu... HEUEHUHEUEHU

    beijosss!!! :DDD

    ResponderExcluir
  20. Ola flor lindo, perfeito seu blog, amei...
    Nossa esse tutorial então perfeito, já sabia fazer ele, mas do jeito que você personalizou ficou lindo demais parabéns...
    Vou voltar sempre!

    flor estou te seguindo se puder seguir de volta serei grata *--*
    http://alinewdesigner.blogspot.com.br

    bju e tenham um lindo dia!

    ResponderExcluir
  21. OMG! Eu estava mesmo em busca desse menu!! acabei de fazer um blog, vou usar!!! Os posts do JD estão cada vez melhores! Adooro aqui! s2

    Meu novo blog> meu-capricho.blogspot.com

    ResponderExcluir
  22. perfeito e muito fofo *--* quem sab no meu proximo template eu o use *--* seu blog é demais, me ajudou muito a criar e personalizar o meu . Parabéns *-*
    http://chama-asamiga.blogspot.com.br

    ResponderExcluir
  23. O menu é muito lindo,simples e cute.

    ResponderExcluir
  24. Respostas
    1. aonde vc quer que apareça o menu (:

      Excluir
    2. Jackie, queria saber qual é a tag do HTML, onde podemos botar esse código, deixando que ele fique acima dos posts, tipo esse menu que você usa, mas, com o esfeito do dropdrow!

      Excluir
    3. É só colocar como HTML java script mesmo e deixar assim>

      http://i.imgur.com/WtsSzAd.png

      Excluir
  25. Muito útil e fofo!
    Gostei muito deste menu!
    bjs
    bpblogdepapel.blogspot.pt

    ResponderExcluir
  26. Sobre o último link : Como assim onde quer que eu apareça o menu ? Onde é ? Por favor me responde por e-mail : liviaaliceramos@gmail.com

    ResponderExcluir
    Respostas
    1. Vc pode colocar onde quer uai, tipo como html java script ou em uma postagem por exemplo.

      Excluir
  27. Jackie, fiz tudo como está no tutorial. Só que as abas do meu menu não aparecem completamente ao passar o mouse sobre elas. O que devo fazer ? obg

    ResponderExcluir
    Respostas
    1. Se o seu blog tem muitos scripts no HTML pode ser que tenha dado alguma interferência na funcionalidade do menu. Eu recomendo vc testar em um blog de testes limpo pra ver se é esse mesmo o problema.

      Se for é só deixar o menu pro próximo layout, quando vc decidir renovar tudo!

      Beijos

      Excluir
  28. Jackie, como faz para não ficar aparecendo logo do Blogger e tal?
    (camiila.oliveira@hotmail.com)

    ResponderExcluir
  29. Muitíssimo obrigada *-* Eu não entendo muito de HTML, eu fiz o meu lay atual, mas estava tendo problemas com o menu. Me ajudou muito fofa <3

    http://umaroqueiracitou.blogspot.com.br/

    ResponderExcluir
  30. Realmente o menu é super lindo , mas dá uma preguiça de editar tudo ><'
    Lindo Blog Jackie !!

    Vou usar na demo : ursosamorosos.blogspot.com

    ResponderExcluir
  31. Olá Jackie adorei o Blog, muito fofo.
    Queria muito colocar esse menu mas não sei, será que vc poderia colocar p mim?
    se puder comenta meu blog: http://coiisasdemamae.blogspot.com.br
    ou me manda e-mail por favor flor : ana_lhary@hotmail.com
    Bjão!

    ResponderExcluir
  32. Oie jackie, eu adorei o menu, mas queria saber como deixá-los sem submenu, você pode me ajudar? Amo seu blog! Beijos

    ResponderExcluir

.