21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Buscar no blog...

HOME

CURSOS ONLINE

VDEOS

PARCERIA

ESTATSTICAS

AUTOR

CONTATO

HOME

INTERNET
Anncios Google

DICAS BLOGS

INFORMTICA

TECNOLOGIA
Word drop

GESTO E R.H.

PROFISSES

SUPER DICAS

PESQUISAS

Css menu Html menu Criar blogs

GOS T OU ? E N T O E S P AL H E !

+ de 500 cursos GRTIS, corra e pegue o seu! Livraria Cultural - livros, CD's, Games com frete grtis + 10X sem juros

ENCONTRE NO BLOG...
Pesquisar

N OS S OS C OME R C IAIS ! P R E S T IGIE !

26/04/12

Como criar um menu drop-down (multinvel) no Blogger

Angelo Luis Ferreira | quinta-feira, abril 26, 2012

T R AN S L AT OR

Selecione o idioma
Pow ered by

Google Tradutor

MAIS L ID AS
Top 10 do Ms
Clicky Web Analytics

4,682
Atualizado em 26/06/2012 subst. position: fixed; por position: absolute;

Agora o Dicionrio Aurlio est na internet, on... Windows 8 Como acessar o Prompt de Comando, Ex... Conhea o programa gratuito que substitui o Corel... Como colocar gif animados em pginas do Facebook ... Faz dez anos ou Fazem dez anos? ~ Visu... Facebook com nova cara! Veja como atualizar ~ V... Facebook 2013 novo visual do feed de notcias... Como criar uma Pgina Oficial no Facebook atu... Como inserir data no Excel com atualizao autom... Aprenda a instalar o Windows 7 pelo Pen Drive ~ Vi...

4,034 2,031 1,760 1,694 1,675 1,599 1,578 1,514 1,367

Menu drop-down, o que ?

Para organizar um blog que possui muitas categorias, pginas e sub-categorias, nada melhor do que criar um menu drop down para apresentar aos seus leitores uma lista com vrios links de forma que aparecero somente quando ativado, ou seja, quando algum passar o mouse sobre ele.

C AT E GOR IAS
Escolha a Categoria

B E M V IN D OS !
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 1/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Participar deste site
Google Friend Connect

Membros (686) Mais

J um membro? Fazer login

Veja o menu em ao no nosso blog: http://visualmusicas.blogspot.com.br/ Um menu drop-down um elemento de interface com o usurio similar uma lista, que permite que o usurio escolha um valor de uma lista de opes que "cai para baixo". Quando o menu drop-down est inativo, ele esconde as opes do menu, economizando espao na tela. Quando ativado, ele mostra uma lista de opes que "cai", onde o usurio pode selecionar uma das opes para que o sistema possa interpretar a inteno do mesmo. - http://pt.wikipedia.org/wiki/Menu_drop-down Se voc j tem um menu simples no seu blog (leia Como criar um menu simples na nova interface do Blogger ) e quer substituir por esta nova ferramenta, siga o nosso tutorial a seguir

Seguir @visualdicas

894 seguidores

P U B L IC ID AD E

Criando o menu drop-down no Blogger

Para criar o seu menu drop-down no seu blog, siga com bastante cuidado as etapas abaixo: Ateno 1: Se voc utiliza um template personalizado, esta dica poder no funcionar, pois o seu blog j deve possuir um sistema prprio de menu Para verificar isso, crie um novo blog de teste utilizando o mesmo template do seu blog original e siga as instrues deste tutorial. Caso o menu funcione corretamente, acrescente-o no seu blog original Ateno 2: Antes de fazer qualquer modificao no modelo e nas pginas HTML, faa um backup completo primeiro, leia: Cuidados quando for editar seu modelo HTML no novo painel ...

V IS U AL D IC AS - F AN B OX

Visual Dicas no

Seguir

+193

Etapa 1 - Adicionar cdigos CSS no painel do Blogger

Acesse o painel do Blogger www.blogger.com e faa o login Entre em [Modelo ] e clique no boto [Personalizar ]. Angelo Luis Ferreira
Adicionar a

312 me adicionaram a crculos

Ver tudo

N OS S O N OV O B LOG!

No menu esquerdo, clique em [Avanado ]. No menu ao lado, escolha [Adicionar CSS].

Puro Rock'n Roll visualmusicas.blogspot.com

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

2/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

N OS S A E MP R E S A
ANGELO LUI S FERREI RA
Seguir

312

Visual Dicas - Formao Profissional Cursos e Treinamentos Profissionalisantes V IS UA LIZA R ME U P E RFIL COMP LE TO

B LOGOS FE R A
Copie o cdigo abaixo:
Games Notebook TV GPS Computador Smartphone Celular

/*----- CSS Drop Down Menu Visual Dicas ----*/ #mbtnavbar { background: #060505; width: auto; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid #960100; height:35px; } #mbtnav { margin: 0; padding: 0; } #mbtnav ul { float: left; list-style: none; margin: 0; padding: 0; } #mbtnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #mbtnav li a:hover, #mbtnav li a:active { background: #BF0100; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #mbtnav li { float: left; padding: 0; } #mbtnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0;
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

Pai na Balada

China Inaugurou o Maior Edifcio do Mundo

Fan Filme da Mulher Maravilha

Homem Cortado ao Meio Pegadinha

14 Minutos Hilrios

Momentos em que Voc Percebe que A lgo Deu

Top 10 Restaurantes com Vistas Espetaculares

Conhea o Mothman

P U B L IC ID AD E

C E N T R AL B L OGS

3/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

} #mbtnav li ul a { width: 140px; } #mbtnav li ul ul { margin: -25px 0 0 161px; } #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { left: -999em; } #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { left: auto; } #mbtnav li:hover, #mbtnav li.sfhover { position: static; } #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { background: #BF0100; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #mbtnav li li a:hover, #mbtnavli li a:active { background: #060505; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } /*----- CSS Drop Down Menu - Visual Dicas ----*/
Cole o cdigo no campo [Adicionar CSS personalizado ] e clique no boto [Aplicar ao blog ].

TOP B LOGS

D IV U L GU E O V IS U AL D IC AS !

Agora clique no link [Visualizar blog ] Nada de diferente dever acontecer com ele nesta fase Se tudo ocorrer bem, clique no link [Voltar para o Blogger ].

< a h r e f = " h t t p : / / v i s u a l d i c a s . b l o g s p o t . c o m " t a r g e t = " _ b l a n k " > < i m g s r c = " h t t p : / / 3 . b p . b l o AGR E GAD O R E S g s p o t . c o m / _ r O 1 a s b I H 6 w 8 / S 7 i B P T 5 b A 5 I / A A A A A A A A T D 0 / v _ k 8 V S f V b U / S 1 6 0 0 R / V i s u a l + D i c a s + S u p e r + L o g o 2 . p n g " b o r d e r = " 0 " a l t = " V i s u a lD i c a sAs u af o n t ed e i n f o r m a o ! " t i t l e = " V i s u a lD i c a s As u af o n t ed e i n f o r m a o ! "/ > < / a > matuto links

Parceria10.org
Blog do Greg

B LOGS QU E LE IO!

Etapa 2 Criar e inserir o gadget do menu

No painel do Blogger, acesse [Layout] e clique em [Adicionar um Gadget].

Crazyseawolf's Blog
O jeito adulto de resolver as coisas! H 2 horas

O Blog do seu PC
Bill Gates tem dinheiro para comprar o Facebook

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

4/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

H 2 horas

How-To Geek
How to Improve Your Android Phones Automatic Brightness With Lux H 4 horas

Visual Dicas
Como desativar abas (guias) na caixa de entrada do Gmail H 15 horas

Geek.com
New Nexus 7 to arrive at Staples next week, on sale July 31 H 20 horas
Mostrar todos

Escolha [HTML/JavaScript].

C OME N T R IOS R E C E N T E S
Ol parabns pelo blog! Tenho um site online qu... - idiomafacil E eu que fiz isso em maro e at agora nada! - B Pezzini pow mas eu ja fui no site e aperte entrar para a l... - jhonata kayke Gostei, mas no tem opo de tamanho para capturar... - nelson www.masterdownn.blogspot.com - Daniel

P OL T IC A D E P R IV AC ID AD E
Poltica de Privacidade Visual Dicas 2010 Direitos Reservados. Tecnologia do Blogger.

V IS IT AS
Visitas
Copie o cdigo:
Clicky Web Analytics

<div id='mbtnavbar'> <ul id='mbtnav'> <li> <a href='LINK da Home'>Home</a> </li> <li> <a href='LINK_2'>TITULO</a> <ul> <li><a href='SUBLINK_1'>SUBTITULO</a></li> <li><a href='SUBLINK_2'>SUBTITULO</a></li> <li><a href='SUBLINK_3'>SUBTITULO</a></li> </ul> </li> <li> <a href='LINK_2'>TITULO_2</a> <ul> <li><a href='SUBLINK_1'>SUBTITULO</a></li> <li><a href='SUBLINK_2'>SUBTITULO</a></li> <li><a href='SUBLINK_3'>SUBTITULO</a></li> </ul> </li> <li> <a href='LINK_3'>TITULO_3</a> <ul> <li><a href='SUBLINK_1'>SUBTITULO</a></li> <li><a href='SUBLINK_2'>SUBTITULO</a></li> <li><a href='SUBLINK_3'>SUBTITULO</a></li> </ul> </li> </ul> </div>
Cole no campo [Contedo ] e o campo [Ttulo ] em branco. Clique no boto [Salvar ].

5 440 1,479 12,566 54,775

Online now Today Yesterday Last 7 days Last 28 days

V IS IT AN T E S R E C E N T E S
Recent Visitors
Join / Sign in

Get This!

R E C E B A AS L T IMAS N OV ID AD E S !
Entre com seu e-mail para se inscrever no blog:

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

5/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Inscrever Delivered by FeedBurner

E S T U D E E M C AS A...

Google+

Depois altere os campos marcados em negrito, conforme descrito na ETAPA 4.

Etapa 3 Posicione o menu corretamente no blog

Visualize o blog agora. Verifique como ficou o layout e se desejar, posicione o menu no incio da pgina, logo abaixo do cabealho. Observe no nosso exemplo, que o novo menu esta posicionado na lateral do blog, onde iremos mudar a sua posio para o topo da pgina, abaixo do cabealho.

De novo no painel, (HTML/JavaScript)logo organizao ].

acesse [Layout] e posicione o gadget do menu abaixo do Cabealho Clique no boto [Salvar

ATENO: Se existir um outro menu no local, com o nome de Pgina, arraste-o para outra posio (na lateral, por exemplo), ou o exclua definitivamente.

Veja ento como ficou o nosso exemplo Veja que colocamos o gadget Pginas na lateral do blog neste momento.

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

6/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Etapa 4 Preencha os campos dos Ttulos e Subttulos

No painel do Blogger, volte para a edio do gadget em [Layout]. Com muita pacincia e de acordo com a estrutura que voc deseja inserir ao seu blog, altere os campos do cdigo Para adicionar mais ttulos ou subttulos s seguir a ordem lgica do cdigo .

Lembre-se que os menus do Blogger so manuais, e toda vez que voc precisar adicionar um novo item, ser necessrio fazer a edio no gadget do menu No nosso exemplo vamos deixar o menu com 2 ttulos: Biografia e lbuns (veja o exemplo abaixo). Substitua os campos em negrito mostrados na Etapa 2 (links, ttulos e subttulo). Nesta etapa, preste bem ateno e observe sempre se os links esto inseridos entre aspas, que pode ser aspas simples ( link ) ou aspas dupla ( link ). Depois de substitudos todos os campos desejados, clique no boto [Salvar ]. Exemplo (no copie): <div id='mbtnavbar'> <ul id='mbtnav'> <li> <a href='http://visualmusicas.blogspot.com.br/'>INCIO</a> </li> <li> <a href='http://visualmusicas.blogspot.com.br/p/artistas.html'>BIOGRAFIA</a > <ul> <li><a href='http://visualmusicas.blogspot.com.br/2011/12/acdc.html'>AC/DC</a> </li> <li><a href='http://visualmusicas.blogspot.com.br/2012/02/blacksabbath.html'>Black Sabbath</a></li> <li><a href='http://visualmusicas.blogspot.com.br/2010/08/deeppurple.html'>Deep Purple</a></li> <li><a href='http://visualmusicas.blogspot.com.br/2009/07/led-

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

7/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

zeppelin_19.html'>Led Zeppelin</a></li> <li><a href='http://visualmusicas.blogspot.com.br/2011/06/who.html'>The Who</a></li> </ul> </li> <li> <a href='http://visualmusicas.blogspot.com.br/p/artistas.html'>LBUNS</a> <ul> <li><a href='http://visualmusicas.blogspot.com/2011/12/albunsacdc.html'>AC/DC</a></li> <li><a href='http://visualmusicas.blogspot.com.br/2012/02/albuns-blacksabbath.html'>Black Sabbath</a></li> <li><a href='http://visualmusicas.blogspot.com.br/2010/08/deeppurple.html'>Deep Purple</a></li> <li><a href='http://visualmusicas.blogspot.com/2010/05/albuns-ledzeppelin.html'>Led Zeppelin</a></li> <li><a href='http://visualmusicas.blogspot.com/2011/06/albuns-who.html'>The Who</a></li> </ul> </li> </ul> </div>

Veja abaixo como ficou o exemplo:

Links para categorias ou marcadores Para inserir itens como categorias (marcadores), por exemplo, insira links que possuem sempre a sequncia: http://Nome_do_seu_blog/search/label/Nome_da_categoria Veja o exemplo abaixo da categoria Led Zeppelin do nosso blog de exemplo. http://visualmusicas.blogspot.com.br/search/label/Led%20Zeppelin Obs.: Substitua sempre o espao (como no exemplo Led (espao) Zeppelin), por %20, ficando o nome da categoria da seguinte forma: Led%20Zeppelin . Mantenha sempre as letras maisculas e minsculas como definido o marcador (case sensitive).

Etapa 5 Alterar cores do menu multinvel

Para alterar as cores do menu, volte para o painel do Blogger e acesse [Modelo ]. Depois clique no boto [Personalizar ].

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

8/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

No menu esquerdo, clique em [Avanado ]. No menu ao lado, escolha [Adicionar CSS].

Alterar Alterar Alterar Alterar

#060505 para mudar a cor de fundo do menu principal. #BF0100 para mudar o fundo de um guia sobre foco do mouse. #BF0100 para mudar a cor de fundo do menu drop-down. #060505 para mudar a cor de fundo de menu drop-down no mouse hover.

Veja aqui a Tabela de Cores Depois de alterado, clique no boto [Aplicar ao blog ]. No nosso exemplo, alteramos a cor do fundo de menu de #060505 para #4b4b4b , e veja como ficou abaixo. Faa os testes e deixe o menu da maneira que goste mais.

Excluindo o seu menu drop down

Se voc no gostou dos efeitos deste menu multinvel, ou se ele no funcionou adequadamente, bem simples exclu-lo. Basta entrar no painel do Blogger e excluir o gadget HTML/JavaScript que voc criou em [Layout] e apagar o cdigo CSS que voc colou em [Modelo ]. Caso isto no resolva, faa o upload dos backups que voc fez (Cuidados quando for editar seu modelo HTML no novo painel ...). Teste o menu drop down em todos os navegadores mais utilizados (Chrome, Firefox, IE e Opera). Nos meus testes o menu funciona bem em todos browsers, com alguns problemas no Internet Explorer 8.0 (no 9.0 funciona normal). byALF

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

9/19

21/07/13
Veja tambm:

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Como inserir cdigos CSS no Blogger Aprenda a criar menus descolados para o seu site Como criar um menu simples na nova interface do Blogger

Fique mais um pouco! Leia tambm:

Tenha uma barra de links nos posts de seu blog e espalhe o ...

Como criar um menu suspenso para Marcadores no Blogger

Aprenda a criar um super painel de controle no Windows 7 ...

Valorize a sua planilha no Excel explorando mais os ...

LinkWithin

5 9 C O M EN T R I O S : IPB Sta Isabel disse... Graas a Deus eu consegui! obrigado.. o pessoal que estiver lendo este comentario....pode acreditar na ajuda ai que de confiana. valeu!!!!!!!!! 0 8 /0 6 /1 2 0 2 :3 3 IBCA BOCA DO RIO disse... Ol, Seu passo-a-passo foi fcil,mais no meu blog aconteceu um erro o menu fica separado do titulo e eu no consigo navegar pelos subtitulos, o que fiz de errado? por favor me ajude. Jesus e abenoe! Obrigada 2 6 /0 6 /1 2 1 6 :0 6 Angelo Luis Ferreira disse... Ol IBCA BOCA DO RIO, Vi o seu blog: http://ibcabocadorio.blogspot.com.br/ Tenta substituir no cdigo CSS do painel do Blogger a expresso: (use ctrl+f para localizar) position: fixed; para position: absolute; Vamos fazer a alterao no nosso artigo... Obrigado pela observao! Visual Dicas 2 6 /0 6 /1 2 2 1 :1 7 Cristiano disse... No estou conseguindo fazer com que os sub-menus apaream, segui tudo certinho creio eu mas no funciona, a estrutura est la mas no funciona a parte em que passando o mouse por cima do titulo abre o restante. Podem me ajudar ? 2 8 /0 6 /1 2 1 0 :5 6 Cristiano disse...

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

10/19

21/07/13
deixar na barra lateral sim . Como resolver ? 2 8 /0 6 /1 2 1 1 :1 8 Cristiano disse... Ainda precisando de ajuda. 2 9 /0 6 /1 2 1 5 :0 0 Angelo Luis Ferreira disse... Ol Cristiano, 1)

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Corrigindo. Quando adiciono o Gadget abaixo do cabealho os subtitulos no abrem mas se

Tenta substituir no cdigo CSS do painel do Blogger a expresso: (use ctrl+f para localizar) position: absolute; para position: fixed; 2) Como voc colocou o script repetido, pode ter algum conflito. Desabilite o gadget lateral... Se no funcionar com estas alteraes, recomendo que utilize um outro tipo de menu dropdowm. Vou fazer algumas pesquisas, e se achar algo legal, publicamos aqui no Visual Dicas... Abraos, 2 9 /0 6 /1 2 2 0 :0 5 Cristiano disse... Angelo eu coloco fixed nas 3 opes oferecidas ? Mesmo quando deleto 1 gadget fica na mesma, se coloco abaixo do cabealho no funciona se coloco na lateral sim. 2 9 /0 6 /1 2 2 0 :1 6 Angelo Luis Ferreira disse... Ol Cristiano, S altere o position onde estiver absolute (2a. opo). Caso no conseguir, experimente o menu mostrado no Dicas para Blogs (Como Colocar Submenu no Blog) 3 0 /0 6 /1 2 1 6 :2 7 Cristiano disse... Angelo obrigado pela ateno, mas no consegui, tem como vc me enviar um email e eu retorno com minha senha e vc v se arruma ? T cansado de tentar hehe abrao. 3 0 /0 6 /1 2 1 7 :0 0 Eder Rodrigues disse... Ol! Estou com o mesmo problema do Cristiano, postado cima. Quando adiciono o Gadget abaixo do cabealho os subtitulos no abrem mas se deixar na barra lateral sim . Como resolver? 0 6 /0 7 /1 2 0 7 :2 9 Eder Rodrigues disse... Este comentrio foi removido pelo autor. 0 6 /0 7 /1 2 0 7 :4 9 Carlos disse... amigo fiz igualzinho vc me disse.. s que ficou uma barrinha preta no meio do menu...fiz um printscreen para que pudesse dar uma olhada e dessa forma me ajudar... e quero deixar o espao igual ao menu que esta abaixo... ..poderia me dizer como fazer?? j que no menu do blog no tive como tirar segue foto para que veja minha duvida https://lh4.googleusercontent.com/-P9pzUvtl9t4/UAhmhfgOiDI/AAAAAAAABTw/_rBo7Bzk3c/s912/00000.jpg 1 9 /0 7 /1 2 1 6 :5 9 Angelo Luis Ferreira disse... Ol Carlos,

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

11/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Seu blog utiliza um template otimizado: "Modelo Picture Window" e o menu pode no funcionar corretamente. Quanto barrinha preta, experimente alterar o Cdigo CSS: DE: border-left:1px solid #333; border-right:1px solid #333; PARA: border-left:0px solid #333; border-right:0px solid #333; Faa o teste e me diga se funcionou.. at mais! Visual Dicas 1 9 /0 7 /1 2 1 9 :4 9 Mrcio disse... Funciona no template Simples? 0 6 /0 8 /1 2 2 2 :0 3 Angelo Luis Ferreira disse... Ol Mrcio, No fiz o teste, mas acredito que funcione sim. Fizemos o teste no nosso blog que usa o modelo "Espetacular" e funcionou corretamente. Veja como ficou: http://visualmusicas.blogspot.com.br/ Abraos, Visual Dicas 0 7 /0 8 /1 2 2 0 :2 0 IFTB disse... Tbm estou tendo problemas... Segui o passo a passo e o menu dropdown exibe somente o primeiro item do submenu, no exibe os outros. meu blog: www.taolu.com.br 2 3 /0 8 /1 2 1 6 :4 2 Rose disse... ol! h como colocar um sub menu onde, ao clicar, o visitante poder ver todas as minhas postagens sobre o assunto? exemplo: ao clicar em roupas, l haver todas minhas postagens sobre blusas, vestidos, limpeza, etc. espero que tenha entendido minha pergunta :) obrigada 2 9 /0 8 /1 2 1 8 :5 4 Angelo Luis Ferreira disse... Ol Rose, Tem sim. Voc dever utilizar "Marcadores". Leia o nosso artigo: Como criar um menu no seu blogger utilizando apenas uma lista de links (veja o item 3 - Marcadores). Espero ter ajudado, Visual Dicas 3 0 /0 8 /1 2 2 0 :3 4 Sora Soralina disse... Tbm estou tendo problemas... Segui o passo a passo e o menu dropdown exibe somente o primeiro item do submenu, no exibe os outros.

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

12/19

21/07/13
meu blog: www.taolu.com.br 0 3 /0 9 /1 2 1 3 :4 2 Banda Balada Campeira disse...

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

BOA NOITE AMIGO, CRIEI O MENU E AGORA COMO FAO PRA POR FOTOS NOS ITENS DELE? DESDE DE JA GRATO 1 2 /0 9 /1 2 2 1 :4 0 Ivan nerd disse... Cara valeu mesmo ajudou muito j coloquei ficou bem legal : http://www.mundootakunerd.blogspot.com.br/ 2 2 /0 9 /1 2 2 1 :0 1 Ma disse... E se ao invs do texto no menu principal, eu quiser colocar figuras? Por exemplo, no lugar de "Incio" ou "Home", eu quiser colocar uma casinha? Agradeo desde j (: 2 6 /0 9 /1 2 1 5 :1 5 Ma disse... Estou com um problema, segui o tutorial direitinho e j personalisei a estrutura do menu como desejava e tudo mais. Porm, no sei onde deu errado, pois quando passo o mouse por cima de um dos links do menu principal, aparece a lista em baixo, mas quando deslizo para clicar no prximo link, o menu desaparece e no d para clicar. Obrigado ! 2 7 /0 9 /1 2 1 9 :1 4 Angelo Luis Ferreira disse... Ol Ma, Em alguns blogs (principalmente os terceirizados) este menu no funciona corretamente.... Minha sugesto que voc encontre outro script para menu "dropdown", ou um novo template para o que deseja... Vamos pesquisar e encontrar "um menu dropdown" mais estvel para o Blogger... Publicaremos mais tarde aqui no Visual Dicas... e acrescentaremos cones (figuras) tambm... Abraos! 2 7 /0 9 /1 2 2 0 :5 6 Kandis Design disse... Muito bom, funcionou direitinho!

A nica coisa que queria mudar, seria para deixar o texto alinhado no centro, e no na esquerda como est agora. Onde mudo isso? Obrigada! 0 8 /1 0 /1 2 1 7 :2 7 Matheus Oliveira disse... Muito bom, obrigado por dizer com fazer isso, estava procurando a um bom tempo. 1 4 /1 0 /1 2 2 3 :0 7 Rayan Almeida disse... Bom dia. No meu Blog funcionou perfeitamente. Eu s queria saber se h possibilidade de realizar uma alterao. O submenu est com a base quadrada, fazendo com que a esttica do Dropdown esteja um pouco rstica. Gostaria de saber se tem como faze a base do submenu igual ao top do menu principal, ou seja, abaulada, sem quinas. Desde j grato. 3 0 /1 0 /1 2 0 9 :1 5 Angelo Luis Ferreira disse... Ol Rayan, Experimente alterar o Cdigo CSS: DE:

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

13/19

21/07/13
border-left:1px solid #333; border-right:1px solid #333; PARA: border-left:0px solid #333; border-right:0px solid #333; Faa o teste e me diga se funcionou.. at mais! Visual Dicas 3 0 /1 0 /1 2 1 1 :3 9 Rayan Almeida disse...

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Na verdade Angelo o meu j estava como voc me indicou, eu usei essa configurao para eliminar as barrinhas que estavam ficando ao lado dos menus. Abaixo vai o link do meu Blog para voc ver como esto os menus e se h uma soluo para que os submenus fiquem com a base abaulada ou pelo menos o topo reto, pois a no teriam muitos problemas no visual. Desde j grato. http://theherpson.blogspot.com.br/ 3 0 /1 0 /1 2 1 6 :5 1 Eduardo Miranda disse... Ol Angelo, tudo bem? Cara, eu estou tentando usar o menu que voc props mas estou conseguindo customizar sua soluo pro que eu pretendo. O que est acontecendo o seguinte, o menu esta incorporando coisas do div pai. se voc entrar em: http://www.anacarolcamargo.com/p/LINK%20da%20Home voc vai ver o que estou dizendo. Eu coloquei o menu que voc propes em 2 lugares do site. Um logo embaixo do cabealho e outro no final. O menu embaixo do cabealho est exatamente como eu gostaria que ficasse, no entanto, os submenus tem um "bug". Os submenus do menu que coloquei no final da pgina aparecem perfeitos, exatamente como gostaria que fosse no menu principal (logo abaixo do cabealho). Eu no estou conseguindo fazer isso. Voc tem alguma idia de como solucionar o problema? Obrigado 0 9 /1 1 /1 2 1 0 :4 3 NOISEGATE01 disse... Ol Angelo, seu tutorial me ajudou muito, gostaria de poder Linkar sua meteria redirecionando para seu blog e mais tarde firmarmos uma parceria, aguardo resposta. Abrao. linkando94.blogspot.com.br 1 4 /1 1 /1 2 1 5 :0 6 Jane Guimares disse... Oi Angelo...o menu funcionou perfeitamente no meu Blog,mais me interessei no menu com buscador que vi no seu Blog,localizado acima do Cabealho,no lugar do Navbar.... Please...me ensine a fazer um.... O meu Blog TV Vampire ( http://tvvampire.blogspot.com.br/ ) Espero Ansiosa sua resposta.... Um Grande Abrao!!!!! 2 2 /0 1 /1 3 0 9 :2 5 Mil Coisas disse... Segui o passo a passo e o menu dropdown exibe somente o primeiro item do submenu, no exibe os outros. Como posso Resolver? O meu blog : http://milcoisasmv.blogspot.pt/ Obrigada 2 5 /0 1 /1 3 2 1 :5 5 Angelo Luis Ferreira disse... Ol Jane, O menu do blog Visual Dicas mais elaborado e faz parte do template. Existem vrios

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

14/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

templates gratuitos para Blogger na internet que voc pode baixar, e que j possuem menu... Visual Dicas 2 6 /0 1 /1 3 1 0 :3 2 Angelo Luis Ferreira disse... Mil Coisas, Verifique novamente se o cdigo que voc inseriu est correto... Se estiver correto e o menu no funcionar normalmente, porque existe incompatibilidade com o template do seu blog. Neste caso o trabalho que d para achar essa incompatiblidade no vale a pena. Visual Dicas 2 6 /0 1 /1 3 1 0 :3 6 Mil Coisas disse... Boa tarde, ha dias que sigo o seu passo a passo, copio exactamente os codigos que indica e infelizmente so um submenu que aparece. Quais o templates que sao compativeis com este menu? Obrigada 2 6 /0 1 /1 3 1 3 :4 6 William Rodrigues disse... Como eu fao para adicionar mais menus , por que s tem o Inicio e mais 3 , eu gostaria de colocar mais 3 0 3 /0 2 /1 3 1 6 :4 8 Vip Mdia Computadores disse... Ol William, Repita a sequencia de cada novo menu, aps o ltimo "/li"

Coloque quantas vezes desejar... Visual Dicas 0 3 /0 2 /1 3 2 1 :3 3 Angelo Luis Ferreira disse... Ol William, Repita a sequencia de cada novo menu, aps o ltimo "/li"

Coloque quantas vezes desejar... Visual Dicas 0 3 /0 2 /1 3 2 1 :3 4 Leandro Chaves disse... Ol. Fiz tudo certinho e est funcionando bem perfeito. S tem uma coisa que no consigo fazer de jeito nenhum: Quando eu posiciono o mouse no menu e aparecem os submenus, se eu descer a pagina com o scroll do mouse, ele desde junto e cria um espao bem grande. E isso ta impedindo de ver a continuao dos submenus. Teria como me dar uma ajuda? Olha l no meu blog e faa o teste. http://siteloggado.blogspot.com.br/ Desde j agradeo! 0 5 /0 2 /1 3 1 8 :1 2 Radiologia Por Palavras disse... Ol. Eu estava com o mesmo problema mas fui verificar os comandos CSS e verifiquei que ao copiar os comandos para a caixa de texto gerou-se um espao de 1 pargrafo no incio. Apaguei esse pargrafo e ficou corrigido o problema. Obrigada pelo tutorial. :) http://radiologiaporpalavras.blogspot.pt/ 0 6 /0 2 /1 3 1 9 :5 9

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

15/19

21/07/13
Radiologia Por Palavras disse...

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Ol outra vez! Depois de conseguir pr a funcionar o menu, agora no consigo postar dentro de cada categoria do menu. Como fao isso sem que os posts caiam sempre na pgina Home? Obrigada. :) 0 7 /0 2 /1 3 1 4 :3 5 Angelo Luis Ferreira disse... Ol Radiologia, Desde j agradeo pela sua ajuda no comentrio anterior... Bem, para voc utilizar as categorias voc deve usar marcadores no Blogger.... Leia o artigo Como inserir marcadores nos posts Valeu... Visual Dicas 0 8 /0 2 /1 3 2 0 :5 5 Radiologia Por Palavras disse... Ol! J consegui, obrigada pela dica! :) 1 0 /0 2 /1 3 2 0 :2 2 Kim disse... Olha coloquei no meu blog deu super certo obrigada.... 1 1 /0 2 /1 3 1 8 :2 4 Gleicy Kaulitz disse... O menu funcionou perfeitamente no blog, s que ele fica aliando a esquerda e eu o queria no centro tem como? eu j tentei mundar no cdigo mas no funcionou. 1 3 /0 2 /1 3 1 4 :3 1 Movimento Mulher Motociclista disse... SHOW!! Nunca me sa to bem com HTML! rrsrs Obrigada! ;) 1 5 /0 3 /1 3 2 0 :2 6 Pierre 22 disse... No meu blog no funcionou pode me explicar o que aconteceu ? 2 8 /0 4 /1 3 0 9 :3 6 Angelo Luis Ferreira disse... Ol Pierre, Passe o endereo (URL) do seu blog... Blogs com template de terceiros podem ter problemas com o cdigo para menu drop down disponvel neste post... Aguardamos, Visual Dicas 2 8 /0 4 /1 3 1 3 :0 0 Thiago C. disse... Ol. Fiz tudo certinho e est funcionando bem perfeito. S tem uma coisa que no consigo fazer de jeito nenhum: Quando eu posiciono o mouse no menu e aparecem os submenus, se eu descer a pagina com o scroll do mouse, ele desde junto e cria um espao bem grande. E isso ta impedindo de ver a continuao dos submenus. Teria como me dar uma ajuda? Olha l no meu blog e faa o teste. http://seusterrores.blogspot.com.br/ Desde j agradeo! 2 1 /0 5 /1 3 2 1 :1 4 Angelo Luis Ferreira disse... Ol Thiago C

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

16/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Tenta substituir no cdigo CSS do painel do Blogger a expresso: (use ctrl+f para localizar) position: fixed; para position: absolute; em #mbtnav li ul { z-index: 9999; position: absolute; ou vice e versa... Se no funcionar, experimente criar o menu do blog Dicas para Blog: Como colocar submenu no blog 2 1 /0 5 /1 3 2 2 :2 4 Thiago C. disse... Obrigado Angelo, mas no deu certo :( Vou tentar fazer o do Dicas para Blog, se eu no conseguir, vou deixar assim mesmo. De qualquer forma, obrigado! 2 3 /0 5 /1 3 2 2 :2 2 Thiago C. disse... Ol, eu tentei fazer o menu do site que vc me recomendou e deu o mesmo problema. Ser que algum problema com o meu template? :( 2 4 /0 5 /1 3 1 3 :4 3 Cyntia disse... Ol Angelo, preciso de uma ajudinha... usei o seu tutorial para adicionar o menu, mas no entendi como fao para publicar as pginas, pois todos os post que crio e publico ele aparecem na primeira pagina... eu queria que eles aparecem somente quando selecionados atravs do menu... isso eu no consegui fazer. Voc consegue me ajudar? Se vc quiser ver o que estou falando acesse: www.emocaoemdetalhes.com.br e logo de cara vo aparecer 2 pots Obrigada Cyntia 2 9 /0 5 /1 3 1 5 :0 4 Angelo Luis Ferreira disse... Ol Cyntia, Leia o artigo Como criar um menu simples na nova interface do Blogger e veja o tpico CRIANDO PGINAS COM ENDEREO DA WEB. Visual Dicas 2 9 /0 5 /1 3 1 8 :4 9 Justinn disse... Ol Angelo, esse o melhor tutorial que achei na internet, muito bom mesmo parabns. Eu s no estou conseguindo mudar as cores, quando insiro o codigo da cor o boto "aplicar ao blog" fica esmaecido e no aplica, vc pode me ajudar porfavor, desde j obrigado. 0 2 /0 6 /1 3 1 3 :0 8 Naiara Brs disse... Oi Angelo. Testei o seu menu e consegui customiz-lo bem, porm os links no clicam (a no ser os acoplados ao dropdown) e ocorre o mesmo problema j relatado, de no ser possvel navegar nos submenus... Poderia me ajudar? Grata! 2 5 /0 6 /1 3 0 1 :1 5 VIDJELUSA disse... ola. olha usei o teu formaulario mas estou com um problema. alguns dos meus subtitulos tem mais do que uma palavra e so aparece uma. queria saber como aumentar o tamanho para que aparea todas as palavras 3 0 /0 6 /1 3 1 5 :2 0

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

17/19

21/07/13
Postar um comentrio

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

Pages 126

GOSTOU DO POST? ENTO ESPALHE!

Gosto 1 Tw eet 1 3

ARTIGOS RECENTES
Encontre-nos no Facebook

Visual Dicas
Curtir 1.726

Visual Dicas compartilhou um link.

Como desativar abas (guias) na caixa de entrada do Gmail Visual Dicas Guias na caixa de entrada Se voc usurio do Gmail, deve ter percebido que o Google reformulou a caixa de entrada incluindo abas de navegao. Leia: Como utilizar abas na nova caixa de entrada do Gmail A novidade bem bacana e facilita bastante a leitura de suas mensagens. Entretanto, se voc n h 12 horas

Visual Dicas compartilhou um link.

Como utilizar abas na nova caixa de entrada do Gmail Visual Dicas Guias na caixa de entrada Se voc usurio do Gmail, deve ter percebido uma alterao na caixa de entrada do navegador de e-mails: Guias com marcadores na caixa de entrada. Suas mensagens podem ser agora classificadas, o que facilita muito a leitura com a nova diviso automtica

P lug-in social do F acebook

QUEM EST CURTINDO...

Encontre-nos no Facebook

Visual Dicas
Curtir 1.726 pessoas curtiram Visual Dicas.

P lug-in social do F acebook

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

18/19

21/07/13

Como criar um menu drop-down (multinvel) no Blogger ~ Visual Dicas

ENCONTRE NO BLOG...
Pesquisar

Visual Dicas 2010 Design by New WP Themes | Bloggerized by Lasantha - Premiumbloggertemplates.com

Free Host | new york lasik surgery |

visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html

19/19