Menu multinível com abas e sub abas para blog

em 29 de outubro de 2015

menu multinivel com abas e sub abas para blog

Alô, pessoas!
O tutorial de hoje é algo que sempre me pedem.
Trata-se de um menu com 3 níveis, semelhante ao que eu uso aqui no blog.
Se você seguir o tutorial certinho e seu blog não apresentar nenhuma incompatibilidade com o menu, o resultado será esse:


Demonstração do tutorial


Fica muito legal e profissional, né? Tem muitas possibilidades, economiza um espaço importante e deixa o blog com ar bem organizado.
Desde que comecei a usar esse tipo de menu, com abas e multinível, sempre me pedem para ensinar.
Então, enjoy!

Adaptei o código usando esse codecod como base, para que seja possível instalar como gadget, no Blogger, sem precisar ir ao código fonte do template. Mais simples, impossível!
O trabalho maior é inserir os links, mas isso é muito tranquilo.
Podem ser links de páginas estáticas, de marcadores, ou links externos.
Use a criatividade, se encha de paciência e mãos à obra!


Como instalar o menu com abas e submenus- Dicas profissionais


A instalação é muito simples, mas como toda vez que eu ensino um menu de navegação as perguntas chovem vou me adiantar às mais comuns, tá?
Leia com atenção o tópico abaixo; é isso que garantirá o sucesso de sua tentativa!

1- O próprio código dirá o que você pode alterar se quiser, e o que você obrigatoriamente tem que alterar. Cores, fontes, etc são alterações opcionais; endereços dos links e nomes das abas são obrigatorios.

2- Toda a parte de CSS, que define coisas como cor, fonte, tamanho, etc... está compreendida dentro da classe <style></style>.
Altere nos campos que deixei marcados em capslock.
Tome muito cuidado! Não apague aspas, nem sinal algum senão nada funcionará!

3- Leia o código! Tudo nele faz sentido.
Para não ficar completamente perdido veja o "glossário" básico:

  • background: fundo do menu;
  • hover: quando o mouse está sobre a aba;
  • width: largura do menu;
  • height: altura do menu;
  • todo o código expresso em background: define o efeito de cor do menu;

4- Nos campos marcados para inserir seus links (ENDEREÇO DO LINK) você deve inserir o endereço completo, com http.
Não vou explicar como fazer isso, suponho que você tem um conhecimento ao menos básico de como fazer já que o tutorial é nível médio.
Não apague as aspas, não apague sinal algum, e insira os links corretos, sem erros.

5- Caso queira acrescentar mais abas ou sub abas pode fazer, mas é por sua conta e risco pois a explicação ficaria imensa.
Apenas alerto para não acrescentar nada abaixo de <li class="last"><a href="ENDEREÇO DO LINK"><span>SUB ITEM 4</span></a></li>
Essa linha fecha todas as abas (atente para a palavra last, quer dizer que é a última aba sempre).

6- Finalmente, a sugestão mais sensata de todas: faça antes em um blog de testes, aprenda como funciona cada comando e só depois de pronto transfira para seu blog real.

Leu tudo?
Então vamos ao trabalho!
Copie este código:

Copiar o código do menu


Agora vá ao painel de seu blog e clique na aba Design (ou Esquema, ou Diseño, ou Layout, é a mesma coisa) e clique em Adicionar um gadget.
Escolhe a opção HTML/JAVASCRIPT e na janela que abrir cole o código copiado. Salve.
Arraste para baixo de seu header/cabeçalho e salve as alterações.
Veja se aparece, se está ok.
Se estiver é hora defazer as alterações de cor, fonte, largura, etc e de colocar seus links.
Ajuste os nomes das abas.
Depois de tudo editado salve novamente.
Está feito.

Se você tiver alguma dúvida que não esteja contemplada no tutorial ou no código por favor diga nos comentários e eu ajudarei se for possível.


Espero que você aproveite o tutorial.
Deu um trabalhão editar o código-base e achar o jeito certo de colocar no Blogger, de modo que fosse bem fácil de entender e fazer.
Então, por favor, não republique esse tutorial em seu blog, seja com ou sem créditos. É desanimador quando vejo meus posts replicados por aí...

Se você acha que ele pode ser útil aos seus leitores indique com um link como chegar aqui, ou compartilhe em suas redes sociais.
Eu? Fico muito agradecida com sua ajuda!
São ações assim que motivam a trazer cada vez mais conteúdo excelente para você!

Imagem que ilustra o post: Shutterstock

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

45 comentários , comente também!

  1. Muito bom Elaine!
    Simples de entender e muito profissional!
    Parabéns!

    ResponderExcluir
  2. Obrigado Elaine pelo seu tempo em partilhar essas dicas preciosas para nós bloggers :)
    mm

    ResponderExcluir
  3. Elaineeee, ja uso um ou dois dos seus menus alem de muitas outras dicas.... e esse menu multinivel é um sonho... com certeza vou usar.... bjs muito agradecidos....

    ResponderExcluir
  4. elaine me ajude por favor quero saber como faz uma pagina de categoria personalizada tipo a do blog sernaiotto.com obrigado minha flor aguardo retorno.

    ResponderExcluir
    Respostas
    1. Aninha, como o blog de ambas rodam em WP seria melhor você perguntar pra Loma como fazer; meus tutoriais s[o se aplicam ao Blogger...

      Excluir
  5. Elaine como faço esse formulário para as pessoas se cadastrar na minha lista pode ensinar?

    ResponderExcluir
    Respostas
    1. Aninha, ele ainda está em teste mas vou montar um post sim, assim que der.

      Excluir
  6. OH ELAINE! MUITO OBRIGADA! SÓ UMA DUVIDAZINHA... ele dá para ficar fixo?

    ResponderExcluir
    Respostas
    1. Ines, não testei, então não sei dizer, mas acho que daria pra adaptar sim :)

      Excluir
  7. eu amo seus tutorias , mas eu nunca achei um de parceiras que dizer um de Gadgets de parceria, fica feio se so ficar pondo um embaixo do outro. graças a seus tutorias meu blog e bem bonito, mas ainda falta ums toques.

    ResponderExcluir
  8. Será que não existe algum erro no código. Testei aqui no meu blog e ao passar o mouse ou clicar nas abas não aparece os submenus. Funcionou com todos que testaram ou será que falhou só comigo mesmo????

    ResponderExcluir
    Respostas
    1. Quando testei aqui no meu também não abriu os submenus. Aparece a lista iteira, mas não abre as sub abas e consequentemente não aparece os sub itens de cada sub aba.
      No momento to editando o código no bloco de notas (apenas acrescentando os links e os nomes das páginas) quando concluir coloco pra rodar no blog, se por acaso continuar não abrindo, volto aqui.

      Excluir
  9. Elaine, me ajude! Já não é o primeiro menu que tento fazer e da o mesmo erro!Primeiro, como meu blog ja tem bastante postagens, na hora de colocar o link pra direcionar a categoria, quando se clica s fica aquele post sendo q tem mais sobre o mesmo assunto e tbm depois de pronto quando posto o menu não 'alimenta', quando a vai na categoria meu post mesmo com marcador não vai pra lá! Me ajuda 😢😢😓😓

    ResponderExcluir
    Respostas
    1. Damaris, o motivo de seu menu não funcionar é que você linkou post ao invés de linkar marcadores.
      Exemplo: na aba Moda você linkou um post quando deveria ter linkado o marcador Moda, esse:
      http://loveis-here.blogspot.com.br/search/label/Moda
      Entendeu?

      beijosss

      Excluir
  10. Elaine,
    Espero que possa explicar minha dúvida, postei noutra conta (G+), mas para garantir, postarei aqui também. Estou com os dois menus abertos no meu blog, prontinhos como vc mostrou (consegui fazer!), colocando código no menu inferior, só que quando jogo ele pra cima não aparece as abas como no de baixo, estou frustradíssima. Porque isso?

    ResponderExcluir
    Respostas
    1. Olha, uma dica seria mudar a posição do menu, colocando-o abaixo do cabeçalho e não na seção crosscoll do template.
      Para isso precisa destravar o cabeçalho, para que ele aceite gadgets abaixo dele.
      Faz isso localizando no código do template a área do cabeçalho (procure Cabeçalho, vai achar fácil).
      Daí troque a palavra true por false, e a palavra no por yes, sempre no código do cabeçalho.
      Também altere o número 1 por 4 por exemplo.
      Salve, atualize o layout e você verá que destravou a área.
      Experimente colocar o menu imediatamente abaixo do cabeçalho.
      Pode dar certo :)

      Excluir
    2. Oi Elaine, obrigada por tentar ajudar, mas não deu certo desta forma também. Resolvi testar dentro do menu modelo, em personalizar e adicionar CSS. Incluí o código que vc passou lá, e apareceu direitinho. Vou tentar trabalhar dessa forma por enquanto. Muito obrigada pela resposta!

      Excluir
  11. Uau, deu certo Elaine! Tentei novamente, até finalmente conseguir! Mil vezes obrigada!

    ResponderExcluir
    Respostas
    1. Eba!
      Tá vendo?
      Com esforço e dedicação sempre dá certo!
      Parabéns!!!!

      Excluir
  12. Elaine, eu queria tirar uma aba. Mas assim que eu tirei a penultima aba, ficou assim:
    http://imageshack.com/a/img907/6320/5Mofwz.jpg Oque eu faço?

    ResponderExcluir
  13. Elaine, comentei em uma reposta acima mas resolvi comentar novamente.
    Estou usando suas dicas para criar um blog sobre futebol e as que tentei deram certo, mas estou com um problema justamente com esta. Meu problema é o mesmo do Prof. Nilton. O menu está pronto, com 6 opções, mas o sub-menu de cada opção não está abrindo. Minha primeira opção possui 3 sub-menu e cada sub possui 2 itens.

    Quando estava editando, e a barra de páginas estava em 2 linhas por não caber por completa, quando selecionava o menu, o sub abria somente na segunda linha de páginas, como se fosse um espelho. Quando reorganizei tudo, e a lista de páginas voltou a ser uma linha, o menu não aparecia mais. É como se ele aparecesse mas ficasse escondido agora que não tem nada abaixo dele.

    Por favor, poderia me ajudar? Isso já aconteceu? Os códigos estão todos corretos, apenas copiei, colei e fiz as mudanças onde era pedido, só não está com a "animação" quando movimento o mouse.

    Grato.

    ResponderExcluir
  14. Deu certo, segui as suas dicas dadas à Edeltraut mas na verdade não tinha atualizado o layout, então ainda não havia aparecido a opção de adicionar outro gadgets na mesma posição do cabeçalho hahaha.

    Muito obrigado Elaine pelas dicas e tutoriais.

    ResponderExcluir
    Respostas
    1. Ah, que bom!
      Por isso é importante ler os comentários, muitas vezes a resposta está neles, né?
      Att.

      Excluir
  15. Este comentário foi removido pelo autor.

    ResponderExcluir
  16. Consegui :D Obrigada pelas dicas Elaine!

    ResponderExcluir
  17. Consegui e até coloquei novas abas... Obrigada mais uma vez.
    Beijos.

    ResponderExcluir
  18. Só estou com uma dúvida... como faço para tirar a setinha vermelha?

    ResponderExcluir
    Respostas
    1. Hum... acho que não dá pra tirar, nunca tentei... mas se quiser tentar tem que apagar um monte de linhas no código, tudo que for referente às bordas...
      bjsss

      Excluir
  19. Olá Elaine.Antes de mais muito obrigada pelos posts, criei o meu blog sozinha(mas não totalmente sozinha, com a sua ajuda).Mas agora tenho uma dúvida e não encontro resposta,eu criei os menus submenus, tudo, alterei cores, titulos e coloquei links, está pronto, mas etou com um problema técnico:ao deslizar o rato por cima, as sub abas e sub intens, aparecem mas desaparecem tão rápido que não dão tempo colocar o cursor em cima, será que me consegue explicar o que se passa? Muito Obrigada. Portugal.

    ResponderExcluir
    Respostas
    1. Elisabete, pode ser a posição na qual colocou o menu.
      Não tenho como saber exatamente pois cada template tem diferenças em relação aos outros, então tem que ir testando...
      bjsss

      Excluir
  20. Oi Elaine, gostaria de saber como postar nos menus e submenus que criei?

    ResponderExcluir
    Respostas
    1. Luiz, em geral o menu funciona à partir de links, sejam de categorias ou de páginas.
      A maneira de os sub menus funcionarem é es, linkar categorias, daí tudo o que postar aparecerá no menu...

      Excluir
  21. Muito bom! Seu post me ajudou muito! Obrigada

    ResponderExcluir
  22. Olá Elaine! Como vai...
    Eu estava usando o seu Menu com Sub Abas (peguei o código e tutorial aqui, porém esse tinha que acrescentar um código no modelo em HTML).
    Não sei se isso está interferindo, por que quando tento usar esse menu aqui não está aparecendo as sub abas e os bub itens... já fiz um teste em outro blog e está normal mas no meu blog, ao passar o mouse, não aparece... o que deve estar errado???

    ResponderExcluir
    Respostas
    1. Michele, pode ser algo em seu template.
      Se no blog de testes deu certo experimente até achar o que pode estar causando o conflito...
      bjssss

      Excluir
  23. coloquei o menu no blog mas os subníveis não aparecem ... :(

    ResponderExcluir
  24. Olá, estou tendo algumas dificuldades. Já tentei instalar submenus de vários lugares mas todos deram o mesmo erro. A opções do menu aparecem normalmente na barra de cima do blog, já os submenus não aparecem. Quando o gadget foi movido de cima para a lateral funcionou... apesar de não ter ficado muito bom pois parece que estava formatado para ficar em cima mesmo. Saberia o que pode estar causando esse erro?

    ResponderExcluir
  25. No caso você colocou um detalhe triangular na parte inferior de cada menu quando se passa o mouse por cima, tem como editar essa forma para aparecer um formato circular por exemplo ou algo assim?

    ResponderExcluir
    Respostas
    1. Não porque na verdade não é uma forma geométrica e sim um truque de CSS que faz a borda "imitar" uma seta...

      Excluir
  26. Oi Elaine tudo bem mais uma vez rsrsrsrs... desculpe incomoda-la mais esse tutorial e o unico que estou tendo mais dor de cabeça pq o código realmente funciona e ate mudei certar cores dele e como o tamanho... mais fato estranho e que no "modelo simples" do blogger eu coloco meu código e não vai o sub menu.

    Por gentileza olhe minhas imagens demonstrativas para entender melhor o que digo:

    Onde eu gostaria que ficasse o codigo:

    img1: https://1.bp.blogspot.com/-fpoYOw7f62Q/WDB9VdFKJ8I/AAAAAAAAMu8/i8qurq-xBtIn11PypCmMCbDYr-1qXm3qQCEw/s1600/Capturar.PNG

    img2: https://3.bp.blogspot.com/-oBnaG_G5FlA/WDB9V3lFcMI/AAAAAAAAMvE/aXHTVaKOP0o8sVdTxPaQgLoUOaGk2XvNQCEw/s1600/Capturar2.PNG (NÃO TEM SUB-MENU)

    Em outra área do blog:

    img1: https://1.bp.blogspot.com/-OUf8VF7YraQ/WDB9VHnWQII/AAAAAAAAMu4/9nTAv-i0wNsnL09LAp57lEOKPbXMA7fEwCEw/s1600/Capturar3.PNG

    img2: https://3.bp.blogspot.com/-QQ4mAUks73c/WDB9WWm3NKI/AAAAAAAAMvI/ikFgoXYLlSAupXd7i4_FkfW7mk1zHMaegCEw/s1600/Capturar4.png

    Meu html cabeçalho e cross:

    img1: https://4.bp.blogspot.com/-2VW-WNBKkfI/WDB9V4I84UI/AAAAAAAAMvA/dFFQFCohiT8B9pSP1zA1iwe1QFcRkrQhgCEw/s1600/html%2B1.PNG

    img2: https://4.bp.blogspot.com/-xQRKPZ6ViZ8/WDB9jdYwT2I/AAAAAAAAMvM/bZCuZLU6pZ4myiF__7yKLcUeh-btB5UcgCLcB/s1600/html%2B2.PNG

    Duvida se não tiver como mudar a posição do cabeçalho para dar efeito ao submenu como poosso jogar criar um novo espaço de gadget entre o cabeçalho e o sidebar para fixar os menus e funcionar os sub-menus, aguardo resposta e desculpe o incomodo. Sucesso Elaine você merece!!!

    ResponderExcluir
    Respostas
    1. Lucas, eu olhei seu blog e pra mim, no meu navegador, aparece tudo certo.
      Conseguiste?

      Excluir
    2. Sim minha querida eu me esforcei e descobri um meio de colocado no html mais foi sufoco o mais importante e como vc disse nunca desista e descobri que quando vc coloca esses menus em baixo dele o html de criação de slide como vc ensinou em outro tutorial as imagens sobrepõem os menus, então infelizmente tive que tira-lo mais mesmo assim eu gostei do jeito que ficou o site. http://www.editoragames.com.br/ (se quiser dar uma olhada no termino dele.

      Muito obrigado mais uma vez pela atenção Elaine, como já disse SUCESSO vc merece. :D

      Excluir
    3. Elaine se teria algum tutorial para quantidade de postagem por marcador.
      Exemplo meu site so pode exibir 7 postagens na pagina inicial o que deixa ele mais leve e com o tamanho certo para os menus do lado.

      Mais quando clico em um dos meus marcadores como por exemplo de games que tem mais de 100 postagens ele abre no site mais de 15 postagens na página queria aprender a reduzir o numero dessas postagens que aparecem no site depois que clica num marcador.

      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…