Menu horizontal multinível para blog - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Menu horizontal multinível para blog

Publicado em 06/05/2019

Menu horizontal multinível para blog

Aqui no blog há inúmeros menus, desde os mais simples até os com abas e sub abas, fixos no topo, que ficam fixos ao rolar, menu de páginas, menu com ícones, etc... Tem menu para blog de todo jeito...
Mas faltava esse, com ícones gerados pela fonte Awesome, totalmente editável e que tem multiníveis.
Veja a demonstração:

Demonstração do tutorial


Para ter em seu blog é simples, mas antes leia as dicas abaixo:
  1. Este menu é responsivo, portanto destina-se a templates responsivos.
  2. Pode ser usado em templates não responsivos? Sim, mas o resultado será ligeiramente diferente.
  3. Testei em temas personalizados com base nos modelos nativos do Blogger. Não testei (pois não uso em meus tutoriais) em nenhum template baixado da internet. Se quiser tentar vai por sua conta e risco.
  4. Falando em conta e risco: sempre teste o tutorial em um blog de testes. Seguro, amiguinho, morreu de velho.
  5. Os ícones que usei no menu podem (claro) ser substituídos pelos que desejar, desde que a fonte especial que gera os ícones tenha os ícones que você quer usar. 
  6. E caso não queira usar os ícones basta apagar o trecho que gera cada um deles do CÓDIGO HTML.
  7. Não creio que funcione nos modelos Soho, Contempo, Notável e Empório, nativos do Blogger. E nem nos modelos de visualização dinâmica.
Dicas lidas e entendidas?
Vamos trabalhar!
Comece acessando a página com os códigos que vamos usar:


Copiar os códigos


A seguir vá até o painel do blog onde pretende instalar o menu e clique na aba Tema.
Aí clique em Editar HTML e dentro da caixa de código-fonte tecle Ctrl+F.
Na barra de busca digite </head> e tecle Enter para localizar.
Acima dessa tag de abertura cole o CÓDIGO JAVASCRIPT  E JQUERY e salve.
Esse é o código que gera os ícones e o código da biblioteca Jquery que faz o menu funcionar.

A seguir localize /* Variable definitions
   ==================== e abaixo disso cole as VARIÁVEIS DO MENU.
Agora localize ]]></b:skin> e acima dessa tag cole o CÓDIGO CSS.
Salve.
Este é o código que define a aparência do menu, coisas como cores e fontes.
Como expliquei acima criei variáveis semelhantes às nativas do Blogger; elas vão possibilitar que alterar cores e fontes seja feito via painel: Tema/Personalizar/Avançado.
Salve.
Estamos finalizando.

Localize esse trecho em seu template:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Abra um espaço e cole o CÓDIGO HTML abaixo dessa linha.
Salve.
Seu menu já está aparecendo e está pronto para receber seus links, os nomes das abas e sub abas, etc...


Como editar o menu multinível e inserir nele seus links


Eu já expliquei diversas vezes como editar um menu aqui no blog, e este menu multinível segue o mesmo princípio básico. Basta inserir seu link nos campos definidos com # e colocar os nomes que desejar dar para cada aba, sub aba e sub sub-aba.
Vou exemplificar abaixo, leia com atenção!

A primeira aba é simples (tem outras abas simples, veja no código, sempre do mesmo jeito) e serve para colocar o link de seu blog, o endereço dele, começando com https. Ela está assim no meu código:

<li><a href='#'><i class='fa fa-home'/> HOME</a></li>

Explicando:
O símbolo #  é onde voce coloca o link para onde o leitor será levado ao clicar. Sempre começa com http ou https caso seu blog tenha o certificado SSL.
Em vermelho é o código do ícone home. Não quer? Apague. A palavra home faz aparecer o ícone da casinha.
HOME é o nome da aba, altere se quiser.

Aba com sub aba está assim no código:

<li><a class='homer' href='#'><i class='fa fa-laptop'/> BLOG</a>
   <ul class='sub-menu'>
   <li><a href='#'>Sub-Menu 1</a></li>
   <li><a href='#'>Sub-Menu 2</a></li>
   <li><a href='#'>Sub-Menu 3</a></li>
   <li><a href='#'>Sub-Menu 4</a></li>
   <li><a href='#'>Sub-Menu 5</a></li>
   </ul>
   </li>

Mesma coisa: em vermelho é o ícone do laptop e BLOG é o nome que dei para a aba. Em LINK coloque o endereço para onde a sub aba direciona;
Altere como quiser. Se quiser mais sub abas repita
<li><a href='#'>Sub-Menu 5</a></li>
antes de </ul>
Sim, dá trabalho :)


Aba multinível, que está assim:

<li><a href='#'><i class='fa fa-tags'/> CATEGORIAS</a>
  <ul class='sub-menu'>
   <li><a href='#'>Sub-Menu 1</a></li>
   <li><a href='#'>Sub-Menu 2</a>
    <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
 <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
 <li><a href='#'>Sub Sub-Menu 5</a></li>
    </ul>
   </li>
     <li><a href='#'>Sub-Menu 3</a>
    <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
 <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
 <li><a href='#'>Sub Sub-Menu 5</a></li>
    </ul>
   </li>
   </ul>
  </li>

Mesmíssimo processo, apenas que o item que possui abas em multinível eu nomeei como Sub sub-menu 1, Sub sub-menu 2 e assim, sucessivamente.
Olhe o menu de exemplo, veja a aba Categorias que eu deixei de exemplo e aí é ir ao trabalho!


Dicas finais:
  1. Quer inserir uma aba multinível no lugar de uma das abas simples? Apague a aba simples e coloque o código da aba multinível no lugar.
  2. Não, não cabe mais abas ali. Só dá pra remanejar, mas inserir mais de 9 ele desconfigura.
  3. Se os nomes de suas abas forem extensos terá que reduzir a quantidade de abas.
  4. Se quiser menos abas basta excluir as que não quer. O menu vai se ajustar.
Para finalizar:
Acesse esse site: https://fontawesome.com/v4.7.0/icons/
Lá você verá todos os ícones que podem ser gerados com a fonte Awesome.
Para trocar o ícone basta trocar a palavra que o faz existir.
Exemplo:
<i class='fa fa-tags'/> faz aparecer o ícone das categorias.
Troque tags por calendar e aparece um calendário.
Troque por book e aparece um livro.
Entendeu?
Mas tem que ser ícone suportado pelo site que gera a fonte, não adianta inventar...

E terminamos!
Espero que seja útil e que você consiga fazer.
Leia, releia, teste, erre, aprenda.
Dá trabalho, mas é recompensador demais conseguir gerenciar sozinho*/sozinha nosso blog!








8 comentários

  1. Oi Elaine, boa noite.
    Não tem o CÓDIGO 1 na pagina de códigos.

    ResponderExcluir
    Respostas
    1. Caroline, corrigi o post. Era o código javascript, é que eu juntei todos ao invés de deixar separado :)
      bjsssss

      Excluir
    2. Olá Elaine, testei o menu no meu blog de teste e ele fica muito perto, quase grudado com o cabeçalho.
      https://novemberteste.blogspot.com/

      Excluir
    3. Caroline, nesse caso precisa descer seu logo.
      Altere o valor em margin: 1em auto; na área do header e vá testando até ajustar.
      bjsss

      Excluir
    4. Deu certo, muito obrigada.
      Bjss

      Excluir
  2. Obrigada, no meu ficou um espetáculo.

    ResponderExcluir
  3. Adorei seu esse seu artigo, realmente é um dos melhores blog que estou visitando. Suas postagens são excelente! Parabéns!

    Já até salvei em meus favoritos ❤️..

    Meu Blog: Site de Loterias e Resultados

    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.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
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…