Menu responsivo com submenus para blog - * Blog Elaine Gaspareto *

Menu responsivo com submenus para blog

Publicado em 14/12/2017

Tempo de leitura:

Menu responsivo com submenus para blog
Já mostrei alguns (vários) tutoriais que ensinam como ter um menu com submenus no blog.
Eu amo menus, então sempre estou mexendo, tentando melhorar os que já conheço, testando outros, inventando...
Hoje quero te mostrar um menu dropdown, com submenus e responsivo.
Caso seu blog seja responsivo poderá usar esse menu e se seu blog for adaptado para celular também poderá usar, bastando fazer uma pequena alteração que explico ao final.
Quando terminarmos o resultado será este:

Demonstração do tutorial


Como colocar o menu responsivo no blog?


Para começar vá até o painel administrativo de seu blog e clique em Tema.
A seguir clique em Editar HTML e dentro da caixa de código tecle Ctrl+F.
Na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS.
Salve.

Agora localize <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> e abaixo disso cole o CÓDIGO HTML.
Salve.
Seu menu já estará aparecendo no blog.

Caso precise de ajuda para inserir links nele, editar o nome de cada aba e sub aba veja este outro tutorial, que mostrei o passo a passo de como editar um menu assim:



Ah, claro, a página com os códigos necessários:

Copiar o código

Dicas extras importantes:

1- O menu é totalmente personalizável pelo painel do Blogger.
Coisas como cores e fontes são alteradas em Tema/Personalizar/Avançado
Mas caso o seu template não seja nativo do Blogger você pode usar o menu sem problemas.

2-Testei em todos os modelos do Blogger.
Funciona em todos, exceto os modelos de visualização dinâmica e os novos modelos responsivos (Soho, Comtempo, Notável, etc).

3- No caso do modelo Watermark precisa editar manualmente cores e fontes pois o modelo não possui as variáveis $(tabs.font).

4- Caso você não use um modelo nativo do Design de modelo do Blogger pode  usar o menu. Nesse caso substitua todas as ocorrências precedidas do sinal $ por códigos hexadecimais de cores, e por nomes de fontes.
Assim, por exemplo:
$(tabs.background.color)
Substitui por
#000000
que significa deixar o fundo do menu na cor preta.

No caso da fonte:
Troque
font: $(tabs.text);
por
font: 15px Arial;
que significa deixar a fonte com 15px de tamanho, do tipo Arial.
Entendeu?


5- Aqui tem uma tabela de cores caso precise. Mas também pode usar as cores de seu blog, claro!

6- Caso seu template não seja responsivo você ainda assim pode usar este menu.
No CÓDIGO HTML cole, antes de começar o código, essa condicional:
<b:if cond='data:blog.isMobile'>
e feche ao final do código:
</b:if>

Ficará assim:
<b:if cond='data:blog.isMobile'>
CÓDIGO HTML AQUI
</b:if>

Caso precise de ajuda para entender melhor leia este post (é importante!):



Veja os seguintes tutoriais:

  1. Slide responsivo
  2. Menu responsivo com abas e sub abas
  3. Cabeçalho ocupando a largura total da página
  4. Como corrigir as heading tags do Blogger
  5. 5 templates gratuitos para baixar e usar (inclui este do tutorial)



Para não perder essas e outras publicações você pode seguir o blog ou curtir nossa fanpage; todos os links são enviados pra lá assim que os posts são liberados.
Curteaí, mig@s!







37 comentários via Blogger
comentários via Facebook

37 comentários:

  1. Ótimo tutorial Elaine, como sempre !
    Você poderia fazer alguns tutoriais nos ensinando como personalizar os novos templates do blog, os responsivos, né, porque tá osso de acertar, e você explica super bem, sempre consigo fazer seus tutos.
    Parabéns pelo Blog

    ResponderExcluir
    Respostas
    1. Luciana, esses templates não aceitam praticamente nenhuma personalização.
      Nenhum dos tutoriais funciona neles, não é possível editar código fonte, nada.
      Então, por enquanto, fico devendo porque, olha, detestei aquilo rsrsrsr
      beijossss

      Excluir
  2. Oi Elaine, usei no meu blog e no desktop ficou ótimo, porém, o menu não aparece pelo smartphone. Alguma sugestão ou dica? www.lacremania.com.br

    ResponderExcluir
    Respostas
    1. Stella, tem sim. Leia o tutorial indicado ao final deste, o que ensina como ativar a exibição na versão mobile do blog. Ele vai explicar como ativar a versão mobile e como fazer qualquer elemento de página aparecer nessa versão.

      Excluir
  3. Elaine, consegui resolver. Foi só ativar a opção personalizar do tema pra celular e apareceu.

    ResponderExcluir
  4. Oi! Gostaria de saber se existe a chance de colocar uma barra de pesquisa nesse menu!

    ResponderExcluir
  5. Gostei muito do menu. Ele vai ser bastante útil no meu blog. Muito obrigada. <3

    ResponderExcluir
  6. Olá Elaine, esse menu é muito bom !! Coloquei ele no meu blog e está tudo certinho, o tutorial é ótimo. Eu queria saber se tem como eu colocar este menu abaixo do cabeçalho, e se tiver qual parte do código eu precisaria alterar. Gratidão por sua gentileza em nos ensinar !!

    ResponderExcluir
    Respostas
    1. Luciana, não coloque o código no lugar que indico, insira como gadget html/javascript e posicione abaixo do cabeçalho.
      além disso altere, no código css, a parte:
      position: fixed;
      por
      position: relative;
      E
      #menu{position:fixed}
      troque por
      #menu{position:relative}

      Excluir
    2. Fiz conforme vc me indicou, mas infelizmente não deu certo, os códigos aparecem todos abertos na pagina =/
      O menu deste seu blog de testes o qual estou enviando o link é responsivo ??
      https://blog-de-testes-do-cliente.blogspot.com.br/
      Se for, usarei ele.

      Excluir
    3. Não, esse não é.
      Mas não tem erro, é só fazer como falei... tem certeza que colou o código no lugar certo?
      Em qual blog está testando?

      Excluir
  7. Sim, eu segui tudo direitinho, mas não deu certo, aí recoloquei o backup q eu tinha salvo. é neste q eu quero colocar https://aromacampestre.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Luciana, tente de novo, mas insira o código html como gadget html.
      E certifique-se de não apagar nada, nem uma aspa, nem um sinal...
      Fiz no blog de testes e não tem erro... mas se apagar/acrescentar uma aspa que seja dá erro...

      Excluir
  8. Então, eu já refiz umas 3 vezes, pra fazer colocando pelo gadget tem q ir lá no html e apagar todo o código que foi colocado para o menu aparecer no topo, neh ....eu fui, apaguei tudo,testei, ficou certinho, sem o menu, aí eu fui e fiz como vc falou, criei um gadget HTML e colei o código e td mais...vou tentar novamente.

    ResponderExcluir
  9. Elaine CONSEGUIIII !! O que eu estava fazendo errado é que eu estava apagando os dois códigos inseridos no html, e era pra apagar só o segundo código !! Agora sim, deu certiiinhooo, Gratidão imensa por sua paciência e ajuda, já te considero uma amiga , bjos !!

    ResponderExcluir
  10. Oi Elaine! No meu tamplate não deu certo,quando vou colocar o código acima de ]]> da erro e não consigo salvar as alterações!!! Queria muito sua ajuda pois quero um menu responsivo e esse seria perfeito! Aguardo retorno! Bjos

    ResponderExcluir
    Respostas
    1. Leh, qual erro está aparecendo?
      Tem certeza que está colocando o código certo no lugar certo?

      Excluir
    2. Quando vou salvar aparece que ( Invalid variable declaration in page skin: Variable is used but not defined. Input: tabs.background.color ) Quando coloco o codigo acima de ]]> não consigo salvar. :(

      Excluir
    3. Leh, isso acontece porque provavelmente seu blog não tem essa variável.
      Basta excluir
      background: $(tabs.background.color)
      e no lugar colocar
      background: #CÓDIGODACORDESEJADA;

      e e se aparecer outro erro assim basta trocar a variável pelo código manual, seja background, cor ou fonte...

      Excluir
    4. Conseguiiiiiiii! Muito obrigada Elaine amo seu blog e seu conteúdo! Ganhou uma nova seguidora fiel por aqui! Bjos.

      Excluir
  11. Boa tarde como faço para deixar esse menu centralizado? Desde já obrigado!

    ResponderExcluir
  12. Oi, Elaine! Primeiramente agradeço pelo trabalho maravilhoso no site. Aprendi coisas que nunca pensei em entender.

    E consegui colocar o menu certo, mas tem como centralizar os links?

    ResponderExcluir
    Respostas
    1. Fabio, vou publicar em breve um que já é centralizado, mas esse voce consegue posicionar como deseja alterando os valores em
      padding-left: 4em;

      O valor 4em posiciona o menu em relação a margem esquerda.
      Quanto maior o número mais afastado da esquerda a primeira aba vai estar.
      Aí é testar até ficar como deseja, mas nunca ficará 100% pois esse menu não é centralizado.
      Como eu disse, tá nos planos postar um assim, falta ajustar uns erros pra poder publicar...

      Excluir
  13. Gente amando essa serie só eu que sou muito curiosa...rsrs arrumo uma estrago duas,mais bom que aprende!!!

    ResponderExcluir
  14. Elaine, segui tudo direitinho, mas no meu blog não ficou com os títulos um do lado do outro e sim a opção de abrir menu na lateral. Como posso ajustar isso?

    Dá uma olhada (Estou seguindo o tutorial Template Catherine - adorei pq é o nome da minha filha :))

    https://temacatherine.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Isabela, não entendi...
      Olhei o blog e pra mim tá normal...
      Qual exatamente é o problema?

      Excluir
  15. Bom dia Elaine,você tem otimas dicas ,obrigada por compartilhar seus conhecimentos. Você pode me ajudar?,Você tem algum tutorial de como criar uma loja no bloguer?estou abrindo a minha e estou em duvida de como organizar meus produtos.

    ResponderExcluir
    Respostas
    1. Mirian, não tenho tutorial mas posso pensar em fazer um.
      Na verdade basicamente é simples, precisa de um template que funcione, uma conta PagSeguro pra receber inclusive via cartão e boas fotos, boas descrições dos produtos.
      Mas vou pensar em um tutorial sim :)
      beijossss

      Excluir
  16. Oi boa tarde, como deixo o menu fechado na versão desktop igual o do seu blog?

    ResponderExcluir
    Respostas
    1. Matheus, não entendi... como assim, fechado?

      Excluir
    2. O codigo que vc colocou no tutorial o menu fica aberto aba por aba, só na versão mobile que ele fecha e fica com essas três linhas, o menu do seu blog já fica com essas três linhas na versão de pc e mobile. eu queria deixar igual ao seu menu, acho que fica mais limpo

      Excluir
    3. Matheus, entendi. Na verdade a maneira que vc está vendo meu menu depende da sua resolução de tela.
      Eu defini que a partir da resolução 1024px o menu ia ser assim. Se vc olhar numa resolução maior, 1152 por exemplo verá que ele fica "aberto" como vc diz.
      Qual resolução vc usa?
      Se quiser pode alterar no código o valor @media screen and (max-width: 1024px) por um menor, tipo trocar 1024 por 900, 800 ou como preferir.

      Excluir
    4. Isso mesmo, coloquei um valor bem alto e agora ficou do jeito que eu queria, muito obrigado mesmo. deu certinho aqui

      Excluir
  17. Oi, Elaine! Tudo bem? No caso do comtempo, teria algum tipo de tutorial de menu responsivo. Li várias vezes nos teus tutoriais que ele já é um template responsivo, mas quando visualizo no celular o layout não fica legal. Já fiz vários ajustes que tu explicou aqui, melhorou bastante, mas o menu ainda tem me incomodado. Caso queira dar uma olhada, meu site é www.delirioscotidianos.com se não tem tutorial, tu faz esse tipo de serviço? Quanto cobra? Tenho muito interesse. Beijos, Franci.

    ResponderExcluir
    Respostas
    1. Franci, os modelos responsivos não aceitam grandes personalizações. Por isso nem me animei a lidar com eles, então sinceramente não tenho tutorial nenhum para eles. Mas de qualquer modo os menus de cada um dos modelos, se não me engano, são responsivos. Não são bonitos, mas são responsivos, eu creio.
      Eu não trabalho mais com blogs... desculpe, fico devendo...
      bjssss

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…