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

Menu responsivo com submenus para blog

em 14/12/2017

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!


5 comentários via Blogger
comentários via Facebook

5 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

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…