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; }Agora cole o próximo código ACIMA de </head>
.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; }
<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
Que legal! Nunca vi um menu assim antes! Muito fofo Jackie *o* Quem sabe no próximo Lay eu uso?! KKKK' :3
ResponderExcluirBjs ^_^
ooi, Jackie como sempre arrasando nos posts!
ResponderExcluirGostei 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/
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!
ResponderExcluirLovei esse menu!Quando eu fizer a próxima reforma do Strela vou usar *o*
ResponderExcluirAh Jackie coloquei seu blog lá no meu menu de divulgação...Tem problema?Adoroo seu blog *o*
Beijinhos da Princess
Amei o menu, fica bem fofo no blog.. No próximo layout irei usá-lo c:
ResponderExcluirRemember December ~
Q CÓDIGO GIGANTE!! Adorei o menu, muito lindo, mais prefiro os mais "enfeitados"
ResponderExcluirBeijokass
Fer --> RetardadasDaNet.blogspot.com
Twitter: @RetardadasDaNet
Senti falta de um menu também!
ResponderExcluirAchei lindo, talvez use no próximo lay!
Retribui?
http://meninablogueiratutoriais.blogspot.com.br/
fiz buttons do Rilakkuma confere la ;) , muito fofo o menu, lindo parabéns !! . www.mymomentsz.blogspot.com
ResponderExcluirSuper lindo, Jackie! Ameiiiii! Já copiei para meu próximo layout. hehehehehe... Beijão, Linda!
ResponderExcluirhttp://solteiras-noivas-casadas.blogspot.com.br/
♥
Awn que cute *---* talvez eu use em um layout futuro :D
ResponderExcluirBeijos,
http://palace-ofg.blogspot.com.br/
O menu é lindo, vou usar *_*
ResponderExcluirCAT GIRL
Adorei o menu. Talvez, eu use em meu próximo layout!
ResponderExcluirkisses!
The Fun Day!
Que menu lindo! *-*
ResponderExcluirDiferente da maioria que estão por aí, achei muito legal, simples de fazer até *--*
Beijos~
myacidblackcherry.blogspot.com
Cara que tutu fofo! Muito bonitinho você ainda explicar tudo com as cores HAHA' Adorei :D
ResponderExcluirBeeijinhos
Ai que lindo que fica,amei jackie!
ResponderExcluirPaixonitedemenina.blogspot.com
Simples e bonito rs
ResponderExcluirprincess-intheclouds.blogspot.com
Ameeeeeeii Jackie!
ResponderExcluirbom sabadooo pra vc beijos
lilica l.
OMG! Que menu fofo *--*
ResponderExcluirParece um pouquinho complicado,mas é perfeito *u*
Kiss :3
todadelicada.blogspot.com
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
ResponderExcluirbeijosss!!! :DDD
Ola flor lindo, perfeito seu blog, amei...
ResponderExcluirNossa 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!
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
ResponderExcluirMeu novo blog> meu-capricho.blogspot.com
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 *-*
ResponderExcluirhttp://chama-asamiga.blogspot.com.br
O menu é muito lindo,simples e cute.
ResponderExcluirJackie onde eu colo o último link?
ResponderExcluiraonde vc quer que apareça o menu (:
ExcluirJackie, 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É só colocar como HTML java script mesmo e deixar assim>
Excluirhttp://i.imgur.com/WtsSzAd.png
Muito útil e fofo!
ResponderExcluirGostei muito deste menu!
bjs
bpblogdepapel.blogspot.pt
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
ResponderExcluirVc pode colocar onde quer uai, tipo como html java script ou em uma postagem por exemplo.
ExcluirJackie, 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
ResponderExcluirSe 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.
ExcluirSe for é só deixar o menu pro próximo layout, quando vc decidir renovar tudo!
Beijos
Nao consegui? da erro? o que eu faco?
ResponderExcluir'-' Tente novamente, não sei porque deu erro (?)
ExcluirJackie, como faz para não ficar aparecendo logo do Blogger e tal?
ResponderExcluir(camiila.oliveira@hotmail.com)
como assim?
ExcluirMuití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
ResponderExcluirhttp://umaroqueiracitou.blogspot.com.br/
Realmente o menu é super lindo , mas dá uma preguiça de editar tudo ><'
ResponderExcluirLindo Blog Jackie !!
Vou usar na demo : ursosamorosos.blogspot.com
Olá Jackie adorei o Blog, muito fofo.
ResponderExcluirQueria 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!
Oie jackie, eu adorei o menu, mas queria saber como deixá-los sem submenu, você pode me ajudar? Amo seu blog! Beijos
ResponderExcluirSó sei dessa forma Gariela :c
Excluir