Embed Size (px)
Citation preview
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 1/19
+ de 500 cursos GRÁTIS, corra e pegue o seu!
Livraria Cultural - livros, CD's, Games com frete grátis + 10X sem juros
E N C O N T R E N O B L O G . . .
Pesquisar
2 6 / 0 4 / 1 2
Como criar um menu drop-down (multinível) no
Blogger
Angelo Luis Ferreira | quinta-feira, abril 26, 2012
3
Atualizado em 26/06/2012 – subst. position: fixed; por position: absolute;
Menu drop-down, o que é?
Para organizar um blog que possui muitas categorias, páginas e sub-categorias, nada
melhor do que criar um menu drop down para apresentar aos seus leitores uma lista
com vários links de forma que aparecerão somente quando ativado, ou seja, quando
alguém passar o mouse sobre ele.
G O S T O U ? E N T Ã O E S P A L H E !G O S T O U ? E N T Ã O E S P A L H E !
N O S S O S C O M E R C I A I S ! P R E S T I G I E !N O S S O S C O M E R C I A I S ! P R E S T I G I E !
T R A N S L A T O RT R A N S L A T O R
Selecione o idioma
Pow ered by Google Tradutor
M A I S L I D A SM A I S L I D A S
Top 10 do Mês
Clicky Web Analytics
4,682 Agora o Dicionário Aurélio está na internet, on...
4,034 Windows 8 – Como acessar o Prompt de Comando, Ex...
2,031 Conheça o programa gratuito que substitui o Corel...
1,760 Como colocar gif animados em páginas do Facebook ...
1,694 “Faz” dez anos ou “Fazem” dez anos? ~ Visu...
1,675 Facebook com nova cara! Veja como atualizar… ~ V...
1,599 Facebook 2013 – novo visual do feed de notícias...
1,578 Como criar uma Página Oficial no Facebook – atu...
1,514 Como inserir data no Excel com atualização autom...
1,367 Aprenda a instalar o Windows 7 pelo Pen Drive ~ Vi...
C A T E G O R I A SC A T E G O R I A S
Escolha a Categoria
B E M V I N D O S !B E M V I N D O S !
HOMEHOME CURSOS ONLINECURSOS ONLINE VÍDEOSVÍDEOS PARCERIAPARCERIA ESTATÍSTICASESTATÍSTICAS AUTORAUTOR CONTATOCONTATO
Buscar no blog...
HOMEHOME INTERNETINTERNET DICAS BLOGSDICAS BLOGS INFORMÁTICAINFORMÁTICA TECNOLOGIATECNOLOGIA GESTÃO E R.H.GESTÃO E R.H. PROFISSÕESPROFISSÕES SUPER DICASSUPER DICAS PESQUISASPESQUISAS
Anúncios Google ► Css menu ► Html menu ► Criar blogs ► Word drop
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 2/19
Veja o menu em ação no nosso blog: http://visualmusicas.blogspot.com.br/
“Um menu drop-down é um elemento de interface com o usuário similar à
uma lista, que permite que o usuário escolha um valor de uma lista de
opções que "cai para baixo". Quando o menu drop-down está inativo, ele
esconde as opções do menu, economizando espaço na tela. Quando
ativado, ele mostra uma lista de opções que "cai", onde o usuário pode
selecionar uma das opções para que o sistema possa interpretar a
intenção 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…
Criando o menu drop-down no Blogger
Para criar o seu menu drop-down no seu blog, siga com bastante cuidado as etapas
abaixo:
Atenção 1: Se você utiliza um template personalizado, esta dica poderá
não funcionar, pois o seu blog já deve possuir um sistema próprio de
menu… Para verificar isso, crie um novo blog de teste utilizando o mesmo
template do seu blog original e siga as instruções deste tutorial. Caso o
menu funcione corretamente, acrescente-o no seu blog original…
Atenção 2: Antes de fazer qualquer modificação no modelo e nas
páginas HTML, faça um backup completo primeiro, leia: Cuidados
quando for editar seu modelo HTML no novo painel ...
Etapa 1 - Adicionar códigos CSS no painel do Blogger
Acesse o painel do Blogger www.blogger.com e faça o login…
Entre em [Modelo] e clique no botão [Personalizar].
No menu esquerdo, clique em [Avançado]. No menu ao lado, escolha [Adicionar CSS].
Participar deste siteGoogle Friend Connect
Membros (686) Mais »
Já é um membro? Fazer login
Seguir Seguir @visualdicas@visualdicas 894 seguidores
P U B L I C I D A D EP U B L I C I D A D E
V I S U A L D I C A S - F A N B O XV I S U A L D I C A S - F A N B O X
Visual Dicas no
+193
Seguir
Angelo Luis Ferreira
312 me adicionaram a círculos Ver tudo
Adicionar a
N O S S O N O V O B L O G !N O S S O N O V O B L O G !
Puro Rock'n Roll
visualmusicas.blogspot.com
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 3/19
Copie o código abaixo:
/*----- 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;
N O S S A E M P R E S AN O S S A E M P R E S A
ANGELO LUIS FERREIRA
312Seguir
Visual Dicas - Formação Profissional
Cursos e Treinamentos Profissionalisantes
VISUALIZAR MEU PERFIL COMPLETO
B L O G O S F E R AB L O G O S F E R A
Games Notebook TV GPS Computador Smartphone Celular
P U B L I C I D A D EP U B L I C I D A D E
C E N T R A L B L O G SC E N T R A L B L O G S
Pai na Balada ChinaInaugurou oMaior Edifíciodo Mundo
Fan Filme daMulherMaravilha
Homem Cortadoao Meio -Pegadinha
14 MinutosHilários
Momentos emque VocêPercebe queAlgo Deu
Top 10Restaurantescom VistasEspetaculares
Conheça oMothman
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 4/19
}
#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 código no campo [Adicionar CSS personalizado] e clique no botão [Aplicar ao
blog].
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].
Etapa 2 – Criar e inserir o “gadget” do menu
No painel do Blogger, acesse [Layout] e clique em [Adicionar um Gadget].
Crazyseawolf's BlogO jeito adulto de resolver as coisas!
Há 2 horas
O Blog do seu PCBill Gates tem dinheiro para comprar o Facebook
T O P B L O G ST O P B L O G S
D I V U L G U E O V I S U A L D I C A S !D I V U L G U E O V I S U A L D I C A S !
<a href="http://visualdicas.blogspot.com" target="_blank"><img src="http://3.bp.blogspot.com/_rO1asbIH6w8/S7iBPT5bA5I/AAAAAAAATD0/v_-k8VSfVbU/S1600-R/Visual+Dicas+Super+Logo2.png" border="0" alt="Visual Dicas - A sua fonte de informação!" title="Visual Dicas – A sua fonte de informação!" /></a>
A G R E G A D O R E SA G R E G A D O R E S
matuto links
Parceria10.org
Blog do Greg
B L O G S Q U E L E I O !B L O G S Q U E L E I O !
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 5/19
Escolha [HTML/JavaScript].
Copie o código:
<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 [Conteúdo] e o campo [Título] em branco. Clique no botão [Salvar].
Há 2 horas
How-To GeekHow to Improve Your Android Phone’s Automatic
Brightness With Lux
Há 4 horas
Visual DicasComo desativar abas (guias) na caixa de entrada do
Gmail
Há 15 horas
Geek.comNew Nexus 7 to arrive at Staples next week, on sale July
31
Há 20 horas
Mostrar todos
C O M E N T Á R I O S R E C E N T E SC O M E N T Á R I O S R E C E N T E S
Olá parabéns pelo blog! Tenho um site online qu... - idiomafacil
E eu que fiz isso em março e até agora nada! - Bê Pezzini
pow mas eu ja fui no site e aperte entrar para a l... - jhonatakayke
Gostei, mas não tem opção de tamanho para capturar... - nelson
www.masterdownn.blogspot.com - Daniel
P O L Í T I C A D E P R I V A C I D A D EP O L Í T I C A D E P R I V A C I D A D E
Política de Privacidade
Visual Dicas © 2010 Direitos Reservados. Tecnologia do Blogger.
V I S I T A SV I S I T A S
Visitas
Clicky Web Analytics
5 Online now
440 Today
1,479 Yesterday
12,566 Last 7 days
54,775 Last 28 days
V I S I T A N T E S R E C E N T E SV I S I T A N T E S R E C E N T E S
Recent VisitorsJoin / Sign in
Get This!
R E C E B A A S Ú L T I M A S N O V I D A D E S !R E C E B A A S Ú L T I M A S N O V I D A D E S !
Entre com seu e-mail para se inscrever no blog:
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 6/19
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
início da página, logo abaixo do cabeçalho.
Observe no nosso exemplo, que o novo menu esta posicionado na lateral do blog, onde
iremos mudar a sua posição para o topo da página, abaixo do cabeçalho.
De novo no painel, acesse [Layout] e posicione o gadget do menu
(HTML/JavaScript)logo abaixo do Cabeçalho… Clique no botão [Salvar
organização].
ATENÇÃO: Se existir um outro menu no local, com o nome de Página,
arraste-o para outra posição (na lateral, por exemplo), ou o exclua
definitivamente.
Veja então como ficou o nosso exemplo… Veja que colocamos o gadget Páginas na
lateral do blog neste momento.
Inscrever
Delivered by FeedBurner
E S T U D E E M C A S A . . .E S T U D E E M C A S A . . .
Google+
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 7/19
Etapa 4 – Preencha os campos dos Títulos e Subtítulos
No painel do Blogger, volte para a edição do gadget em [Layout]. Com muita paciência
e de acordo com a estrutura que você deseja inserir ao seu blog, altere os campos do
código… Para adicionar mais títulos ou subtítulos é só seguir a ordem lógica do
código.
Lembre-se que os menus do Blogger são manuais, e toda vez que você precisar
adicionar um novo item, será necessário fazer a edição no gadget do menu…
No nosso exemplo vamos deixar o menu com 2 títulos: Biografia e Álbuns (veja o
exemplo abaixo). Substitua os campos em negrito mostrados na Etapa 2 (links, títulos
e subtítulo).
Nesta etapa, preste bem atenção e observe sempre se os links estão inseridos entre
“aspas”, que pode ser aspas simples ( ‘ link ‘ ) ou aspas dupla ( “ link “). Depois de
substituídos todos os campos desejados, clique no botão [Salvar].
Exemplo (não copie):
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='http://visualmusicas.blogspot.com.br/'>INÍCIO</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/black-
sabbath.html'>Black Sabbath</a></li>
<li><a href='http://visualmusicas.blogspot.com.br/2010/08/deep-
purple.html'>Deep Purple</a></li>
<li><a
href='http://visualmusicas.blogspot.com.br/2009/07/led-
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 8/19
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/albuns-
acdc.html'>AC/DC</a></li>
<li><a
href='http://visualmusicas.blogspot.com.br/2012/02/albuns-black-
sabbath.html'>Black Sabbath</a></li>
<li><a href='http://visualmusicas.blogspot.com.br/2010/08/deep-
purple.html'>Deep Purple</a></li>
<li><a
href='http://visualmusicas.blogspot.com/2010/05/albuns-led-
zeppelin.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 sequência:
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 espaço (como no exemplo Led (espaço)
Zeppelin), por %20, ficando o nome da categoria da seguinte forma:
Led%20Zeppelin. Mantenha sempre as letras maiúsculas e minúsculas
como definido o marcador (“case sensitive”).
Etapa 5 – Alterar cores do menu multinível
Para alterar as cores do menu, volte para o painel do Blogger e acesse [Modelo].
Depois clique no botão [Personalizar].
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 9/19
No menu esquerdo, clique em [Avançado]. No menu ao lado, escolha [Adicionar CSS].
Alterar #060505 para mudar a cor de fundo do menu principal.
Alterar #BF0100 para mudar o fundo de um guia sobre foco do mouse.
Alterar #BF0100 para mudar a cor de fundo do menu drop-down.
Alterar #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 botão [Aplicar ao blog].
No nosso exemplo, alteramos a cor do fundo de menu de #060505 para #4b4b4b, e
veja como ficou abaixo. Faça os testes e deixe o menu da maneira que goste mais.
Excluindo o seu menu drop down
Se você não gostou dos efeitos deste menu multinível, ou se ele não 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 código CSS que
você colou em [Modelo].
Caso isto não resolva, faça 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
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 10/19
Tenha uma barrade links nos postsde seu blog e
espalhe o ...
Como criar ummenu suspensopara Marcadores
no Blogger
Aprenda a criar umsuper painel decontrole no
Windows 7 ...
Valorize a suaplanilha no Excelexplorando mais
os ...
Veja também:
Como inserir códigos 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 também:
LinkWithin
5 9 COM ENT ÁRIOS :
IPB Sta Isabel disse...
Graças a Deus eu consegui! obrigado..
o pessoal que estiver lendo este comentario....pode acreditar na ajuda ai que é de confiança.
valeu!!!!!!!!!
08/06/12 02:33
IBCA BOCA DO RIO disse...
Olá,
Seu passo-a-passo foi fácil,mais no meu blog aconteceu um erro o menu fica separado do
titulo e eu não consigo navegar pelos subtitulos, o que fiz de errado? por favor me ajude.
Jesus e abençoe!
Obrigada
26/06/12 16:06
Angelo Luis Ferreira disse...
Olá IBCA BOCA DO RIO,
Vi o seu blog: http://ibcabocadorio.blogspot.com.br/
Tenta substituir no código CSS do painel do Blogger a expressão: (use ctrl+f para localizar)
position: fixed;
para
position: absolute;
Vamos fazer a alteração no nosso artigo...
Obrigado pela observação!
Visual Dicas
26/06/12 21:17
Cristiano disse...
Não estou conseguindo fazer com que os sub-menus apareçam, segui tudo certinho creio eu
mas não funciona, a estrutura está la mas não funciona a parte em que passando o mouse por
cima do titulo abre o restante. Podem me ajudar ?
28/06/12 10:56
Cristiano disse...
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 11/19
Corrigindo. Quando adiciono o Gadget abaixo do cabeçalho os subtitulos não abrem mas se
deixar na barra lateral sim . Como resolver ?
28/06/12 11:18
Cristiano disse...
Ainda precisando de ajuda.
29/06/12 15:00
Angelo Luis Ferreira disse...
Olá Cristiano,
1)
Tenta substituir no código CSS do painel do Blogger a expressão: (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 não funcionar com estas alterações, recomendo que utilize um outro tipo de menu drop-
dowm. Vou fazer algumas pesquisas, e se achar algo legal, publicamos aqui no Visual Dicas...
Abraços,
29/06/12 20:05
Cristiano disse...
Angelo eu coloco fixed nas 3 opções oferecidas ? Mesmo quando deleto 1 gadget fica na
mesma, se coloco abaixo do cabeçalho não funciona se coloco na lateral sim.
29/06/12 20:16
Angelo Luis Ferreira disse...
Olá Cristiano,
Só altere o position onde estiver absolute (2a. opção).
Caso não conseguir, experimente o menu mostrado no Dicas para Blogs (Como Colocar
Submenu no Blog)
30/06/12 16:27
Cristiano disse...
Angelo obrigado pela atenção, mas não consegui, tem como vc me enviar um email e eu
retorno com minha senha e vc vê se arruma ? Tô cansado de tentar hehe abraço.
30/06/12 17:00
Eder Rodrigues disse...
Olá! Estou com o mesmo problema do Cristiano, postado à cima. Quando adiciono o Gadget
abaixo do cabeçalho os subtitulos não abrem mas se deixar na barra lateral sim . Como
resolver?
06/07/12 07:29
Eder Rodrigues disse...
Este comentário foi removido pelo autor.06/07/12 07:49
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
espaço igual ao menu que esta abaixo... ..poderia me dizer como fazer?? já que no menu do
blog çá não tive como tirar
segue foto para que veja minha duvida
https://lh4.googleusercontent.com/-P9pzUvtl9t4/UAhmhfgOiDI/AAAAAAAABTw/_rBo7Bzk-
3c/s912/00000.jpg
19/07/12 16:59
Angelo Luis Ferreira disse...
Olá Carlos,
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 12/19
Seu blog utiliza um template otimizado: "Modelo Picture Window" e o menu pode não funcionar
corretamente.
Quanto à barrinha preta, experimente alterar o Código CSS:
DE:
border-left:1px solid #333;
border-right:1px solid #333;
PARA:
border-left:0px solid #333;
border-right:0px solid #333;
Faça o teste e me diga se funcionou..
até mais!
Visual Dicas
19/07/12 19:49
Márcio disse...
Funciona no template Simples?
06/08/12 22:03
Angelo Luis Ferreira disse...
Olá Márcio,
Não 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/
Abraços,
Visual Dicas
07/08/12 20:20
IFTB disse...
Tbm estou tendo problemas...
Segui o passo a passo e o menu dropdown exibe somente o primeiro item do submenu, não
exibe os outros.
meu blog: www.taolu.com.br
23/08/12 16:42
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
29/08/12 18:54
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
30/08/12 20:34
Sora Soralina disse...
Tbm estou tendo problemas...
Segui o passo a passo e o menu dropdown exibe somente o primeiro item do submenu, não
exibe os outros.
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 13/19
meu blog: www.taolu.com.br
03/09/12 13:42
Banda Balada Campeira disse...
BOA NOITE AMIGO, CRIEI O MENU E AGORA COMO FAÇO PRA POR FOTOS NOS ITENS
DELE? DESDE DE JA GRATO
12/09/12 21:40
Ivan nerd disse...
Cara valeu mesmo ajudou muito já coloquei ficou bem legal ó:
http://www.mundootakunerd.blogspot.com.br/
22/09/12 21:01
Maçã disse...
E se ao invés do texto no menu principal, eu quiser colocar figuras? Por exemplo, no lugar de
"Início" ou "Home", eu quiser colocar uma casinha?
Agradeço desde já (:
26/09/12 15:15
Maçã disse...
Estou com um problema, segui o tutorial direitinho e já personalisei a estrutura do menu como
desejava e tudo mais. Porém, não 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
próximo link, o menu desaparece e não dá para clicar.
Obrigadão !
27/09/12 19:14
Angelo Luis Ferreira disse...
Olá Maçã,
Em alguns blogs (principalmente os terceirizados) este menu não funciona corretamente....
Minha sugestão é que você encontre outro script para menu "dropdown", ou um novo template
para o que deseja...
Vamos pesquisar e encontrar "um menu dropdown" mais estável para o Blogger...
Publicaremos mais tarde aqui no Visual Dicas... e acrescentaremos ícones (figuras) também...
Abraços!
27/09/12 20:56
Kandis Design disse...
Muito bom, funcionou direitinho!
A única coisa que queria mudar, seria para deixar o texto alinhado no centro, e não na esquerda
como está agora. Onde mudo isso?
Obrigada!
08/10/12 17:27
Matheus Oliveira disse...
Muito bom, obrigado por dizer com fazer isso, estava procurando a um bom tempo.
14/10/12 23:07
Rayan Almeida disse...
Bom dia. No meu Blog funcionou perfeitamente. Eu só queria saber se há possibilidade de
realizar uma alteração. O submenu está com a base quadrada, fazendo com que a estética do
Dropdown esteja um pouco rústica. 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.
30/10/12 09:15
Angelo Luis Ferreira disse...
Olá Rayan,
Experimente alterar o Código CSS:
DE:
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 14/19
border-left:1px solid #333;
border-right:1px solid #333;
PARA:
border-left:0px solid #333;
border-right:0px solid #333;
Faça o teste e me diga se funcionou..
até mais!
Visual Dicas
30/10/12 11:39
Rayan Almeida disse...
Na verdade Angelo o meu já estava como você me indicou, eu usei essa configuração para
eliminar as barrinhas que estavam ficando ao lado dos menus. Abaixo vai o link do meu Blog
para você ver como estão os menus e se há uma solução para que os submenus fiquem com
a base abaulada ou pelo menos o topo reto, pois aí não teriam muitos problemas no visual.
Desde já grato.
http://theherpson.blogspot.com.br/
30/10/12 16:51
Eduardo Miranda disse...
Olá Angelo, tudo bem?
Cara, eu estou tentando usar o menu que você propôs mas estou conseguindo customizar sua
solução 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ê propôes em 2 lugares do site.
Um logo embaixo do cabeçalho e outro no final. O menu embaixo do cabeçalho está
exatamente como eu gostaria que ficasse, no entanto, os submenus tem um "bug".
Os submenus do menu que coloquei no final da página aparecem perfeitos, exatamente como
gostaria que fosse no menu principal (logo abaixo do cabeçalho). Eu não estou conseguindo
fazer isso. Você tem alguma idéia de como solucionar o problema?
Obrigado
09/11/12 10:43
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.
Abraço.
linkando94.blogspot.com.br
14/11/12 15:06
Jane Guimarães 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 Cabeçalho,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 Abraço!!!!!
22/01/13 09:25
Mil Coisas disse...
Segui o passo a passo e o menu dropdown exibe somente o primeiro item do submenu, não
exibe os outros. Como posso Resolver?
O meu blog é:
http://milcoisasmv.blogspot.pt/
Obrigada
25/01/13 21:55
Angelo Luis Ferreira disse...
Olá Jane,
O menu do blog Visual Dicas é mais elaborado e faz parte do template. Existem vários
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 15/19
templates gratuitos para Blogger na internet que você pode baixar, e que já possuem menu...
Visual Dicas
26/01/13 10:32
Angelo Luis Ferreira disse...
Mil Coisas,
Verifique novamente se o código que você inseriu está correto...
Se estiver correto e o menu não funcionar normalmente, é porque existe incompatibilidade com
o template do seu blog. Neste caso o trabalho que dá para achar essa incompatiblidade não
vale a pena.
Visual Dicas
26/01/13 10:36
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
26/01/13 13:46
William Rodrigues disse...
Como eu faço para adicionar mais menus , por que só tem o Inicio e mais 3 , eu gostaria de
colocar mais 3
03/02/13 16:48
Vip Mídia Computadores disse...
Olá William,
Repita a sequencia de cada novo menu, após o último "/li"
Coloque quantas vezes desejar...
Visual Dicas
03/02/13 21:33
Angelo Luis Ferreira disse...
Olá William,
Repita a sequencia de cada novo menu, após o último "/li"
Coloque quantas vezes desejar...
Visual Dicas
03/02/13 21:34
Leandro Chaves disse...
Olá. Fiz tudo certinho e está funcionando bem perfeito. Só tem uma coisa que não 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 espaço bem grande. E isso
ta impedindo de ver a continuação dos submenus. Teria como me dar uma ajuda? Olha lá no
meu blog e faça o teste.
http://siteloggado.blogspot.com.br/
Desde já agradeço!
05/02/13 18:12
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 espaço de 1 parágrafo no início.
Apaguei esse parágrafo e ficou corrigido o problema. Obrigada pelo tutorial. :)
http://radiologiaporpalavras.blogspot.pt/
06/02/13 19:59
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 16/19
Radiologia Por Palavras disse...
Olá outra vez! Depois de conseguir pôr a funcionar o menu, agora não consigo postar dentro de
cada categoria do menu. Como faço isso sem que os posts caiam sempre na página Home?
Obrigada. :)
07/02/13 14:35
Angelo Luis Ferreira disse...
Olá Radiologia,
Desde já agradeço pela sua ajuda no comentário anterior...
Bem, para você utilizar as categorias você deve usar marcadores no Blogger....
Leia o artigo Como inserir marcadores nos posts
Valeu...
Visual Dicas
08/02/13 20:55
Radiologia Por Palavras disse...
Olá! Já consegui, obrigada pela dica! :)
10/02/13 20:22
Kim disse...
Olha coloquei no meu blog deu super certo obrigada....
11/02/13 18:24
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 código mas não funcionou.
13/02/13 14:31
Movimento Mulher Motociclista disse...
SHOW!! Nunca me saí tão bem com HTML! rrsrs Obrigada! ;)
15/03/13 20:26
Pierre 22 disse...
No meu blog não funcionou pode me explicar o que aconteceu ?
28/04/13 09:36
Angelo Luis Ferreira disse...
Olá Pierre,
Passe o endereço (URL) do seu blog...
Blogs com template de terceiros podem ter problemas com o código para menu drop down
disponível neste post...
Aguardamos,
Visual Dicas
28/04/13 13:00
Thiago C. disse...
Olá. Fiz tudo certinho e está funcionando bem perfeito. Só tem uma coisa que não 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 espaço bem grande. E isso
ta impedindo de ver a continuação dos submenus. Teria como me dar uma ajuda? Olha lá no
meu blog e faça o teste.
http://seusterrores.blogspot.com.br/
Desde já agradeço!
21/05/13 21:14
Angelo Luis Ferreira disse...
Olá Thiago C
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 17/19
Tenta substituir no código CSS do painel do Blogger a expressão: (use ctrl+f para localizar)
position: fixed;
para
position: absolute;
em
#mbtnav li ul {
z-index: 9999;
position: absolute;
ou vice e versa...
Se não funcionar, experimente criar o menu do blog Dicas para Blog:
Como colocar submenu no blog
21/05/13 22:24
Thiago C. disse...
Obrigado Angelo, mas não deu certo :(
Vou tentar fazer o do Dicas para Blog, se eu não conseguir, vou deixar assim mesmo.
De qualquer forma, obrigado!
23/05/13 22:22
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? :(
24/05/13 13:43
Cyntia disse...
Olá Angelo, preciso de uma ajudinha... usei o seu tutorial para adicionar o menu, mas não
entendi como faço para publicar as páginas, pois todos os post que crio e publico ele
aparecem na primeira pagina... eu queria que eles aparecem somente quando selecionados
através do menu... isso eu não consegui fazer. Você consegue me ajudar?
Se vc quiser ver o que estou falando acesse: www.emocaoemdetalhes.com.br e logo de cara
vão aparecer 2 pots
Obrigada
Cyntia
29/05/13 15:04
Angelo Luis Ferreira disse...
Olá Cyntia,
Leia o artigo Como criar um menu simples na nova interface do Blogger e veja o tópico
CRIANDO PÁGINAS COM ENDEREÇO DA WEB.
Visual Dicas
29/05/13 18:49
Justinn disse...
Olá Angelo, esse é o melhor tutorial que achei na internet, muito bom mesmo parabéns. Eu só
não estou conseguindo mudar as cores, quando insiro o codigo da cor o botão "aplicar ao blog"
fica esmaecido e não aplica, vc pode me ajudar porfavor, desde já obrigado.
02/06/13 13:08
Naiara Brás disse...
Oi Angelo. Testei o seu menu e consegui customizá-lo bem, porém os links não clicam (a não
ser os acoplados ao dropdown) e ocorre o mesmo problema já relatado, de não ser possível
navegar nos submenus...
Poderia me ajudar? Grata!
25/06/13 01:15
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
apareça todas as palavras
30/06/13 15:20
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 18/19
TweetTweet 1 3
4
Postar um comentário
Pages 126 1 2 3 4 »
G O S T O U D O P O S T ? E N T Ã O E S P A L H E !
A R T I G O S R E C E N T E S
Encontre-nos no Facebook
Visual Dicas
Curtir 1.726
Plug-in social do Facebook
Visual Dicas compartilhou um link.
há 12 horas
Como desativar abas (guias) na caixa de entrada do Gmail
Visual Dicas
Guias na caixa de entrada Se você é usuário do Gmail, deve ter percebido
que o Google reformulou a caixa de entrada incluindo abas de navegação.
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
Visual Dicas compartilhou um link.
Como utilizar abas na nova caixa de entrada do Gmail
Visual Dicas
Guias na caixa de entrada Se você é usuário do Gmail, deve ter percebido
uma alteração na caixa de entrada do navegador de e-mail’s: Guias com
marcadores na caixa de entrada. Suas mensagens podem ser agora
classificadas, o que facilita muito a leitura com a nova divisão automática
Q U E M E S T Á C U R T I N D O . . .
Encontre-nos no Facebook
Visual Dicas
Curtir
1.726 pessoas curtiram Visual Dicas.
Plug-in social do Facebook
Gosto 1
21/07/13 Como criar um menu drop-down (multinível) no Blogger ~ Visual Dicas
visualdicas.blogspot.com.br/2012/04/como-criar-um-menu-drop-down-multinivel.html 19/19
E N C O N T R E N O B L O G . . .
Pesquisar
Visual Dicas © 2010 Design by New WP Themes | Bloggerized by Lasantha - Premiumbloggertemplates.com
Free Host | new york lasik surgery |
