Anuncio layout

Anuncio layout
Encomende já o seu layout!
- 9.6.17

Como fazer Menu Dropdown (Com Subcategorias) responsivo - Blogger

Aprenda a fazer menu de subcategorias no blogger! Menu dropdown


Uma das coisas essênciais em um blog é a fácil navegação do seu leitor. Ter um menu com subcategorias vai deixar seus links bem organizados, facilitar na procura de determinado assunto, economizar muito espaço no seu menu, e ainda deixar seu layout bem bonito e mais profissional! Ah, o menu é responsivo, porque vale lembrar que o que fica bonito no computador, também é importante ficar bonito no celular!

⚠ Importante! Fiz esse código para o tema SIMPLES do blogger, que na minha opinião é o melhor tema para se trabalhar do próprio blogger. Maaaas ele também funciona lindamente no meu tema base responsivo ♥  Se você não usa nenhum desses dois temas, não garanto que vai dar certo, mas fique a vontade para tentar. 


Nesse tutorial vou dar o código pronto, e explicar onde mudar para os seus links, mudar o nome que aparece, e mudar as cores para combinar com o seu layout. Ah, caso você ainda não entenda sobre os Marcadores do Blog, apenas leia esse post!

Antes de começar, eu aconselho você a salvar o seu layout em algum lugar, para caso algo dê errado. Vale também, testar num blog de testes antes de testar no seu blog principal.

1. No painel do blogger, vá em Layout. Clique em Adicionar Gadget e selecione o HTML/Javascript. Como na imagem:

Aprenda a fazer menu de subcategorias no blogger! Menu dropdown


Depois cole o seguinte código:

<div id='nav'>
<ul>
<li><a href='/'>Início</a></li>
<li><a href='/p/sobre.html'>Sobre</a></li>
<li><a href='#'> Categorias  </a>
<br />
<ul class="menus">
<li> <a href="/search/label/Categoria 1"> Categoria 1 </a></li>
<li><a href="/search/label/Categoria 2">  Categoria 2  </a></li>
<li><a href="/search/label/Categoria 3">  Categoria 3  </a></li>
<li><a href="/search/label/Categoria 4">  Categoria 4  </a></li>
</ul>
</li>
<li><a href='/search/label/Moda'>Moda</a></li>

</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu"><img src="http://i.imgur.com/wvad5ud.png"/></div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
</script>

Agora salve.

2. Agora vá em Modelo, e clique em Editar Html como na imagem:

Aprenda a fazer menu de subcategorias no blogger! Menu dropdown

Depois clique na área do código, e aperte ctrl+f no seu teclado para abrir a caixa de busca. E procure por:

.tabs-inner .section:first-child {

Dependendo do seu layout, pode ser que não tenha essa parte, então se você não achar nada ao procurar, pode pular para o passo 3. Mas se aparecer algum código (como na imagem mais abaixo), continue aqui.

Vão aparecer vários códigos que você vai ter que apagar para o menu funcionar. Apague desde /* Tabs até a linha a cima de */ Columns . Veja bem a imagem abaixo antes de fazer:

Aprenda a fazer menu de subcategorias no blogger! Menu dropdown
Clique na imagem para ver maior
3. Depois de apagar, aperte ctrl+f novamente, e procure por:

]]></b:skin>

Acima dessa tag → ]]><b:skin /> ← cole o seguinte código:

/*---------------- Menu Dropdown - por butlariz.com ---------------- */
#nav {
    z-index: 999;
    width: 100%;
    top: 0px;
    left: 0px;
    color: #000000;
    position: fixed;
    background-color: #fff;
    padding: 12px 0px 15px 0px;
    font-family: calibri;
    font-size: 11pt;
}
#nav a {
    transition-duration: .2s;
    color: #000000;
    padding: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#nav a:hover { color: #ff6262}
#nav li {
    list-style: none;
    text-align: center!important;
    margin-left: 50px;
    position: relative;
    float: left;
}
#nav ul {
    position: relative;
    width: 1200px;
    float: none;
    padding: 0px;
    margin: auto;
    left: -17px;
    overflow: visible;
}
#nav li ul a {
    margin-left: 0px;
}

#nav ul li:hover ul.menus {
    height: 100px;}
ul.menus {
    position: absolute!important;
    padding-top: 15px!important;
    height: 0px;
    width: 150px!important;
    overflow: hidden!important;
    transition-duration: .4s;
}
ul.menus li {
    width: 133px;
    background-color: #ffe2e2;
    font-size: 11px;
    color: #000;
    padding: 10px!important;
    margin-left: 0px!important;
}

ul.menus li a {
    font-size: 10pt!important;
}


@media screen and (max-width: 900px) {
#menu {
    color: #000;
    width: 100%;
    padding: 5px;
    display: block;
    text-align: center;
    z-index: 999999;
    background-color: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
}
#menu img {
    width: 50px;
    float: left;
    margin-left: 10px;
}
#nav.js {
display: none;
}

#nav {
    text-align: center;
    overflow: hidden;
    width: 100%;
    margin-top: 50px;
    color: transparent;
    font-size: 30px;
}
#nav ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin-top: 0px;
    margin-left: 20px;
}

ul.menus {
    height: 0px;
    position: relative!important;
    width: auto!important;
    padding-top: 0px!important;
}
#nav li {
    width: 100%;
    margin: 0px;
    background-color: #fff;
}

#nav li a {
    font-size: 13pt!important;
}
}

@media screen and (min-width: 900px) {
#menu {
    display: none;
    }
}

/*---------------- Fim do menu dropdown - butlariz.com ---------------- */

Deve ficar como na imagem:

Aprenda a fazer menu de subcategorias no blogger! Menu dropdown


Depois é só salvar! Confira no blog como ficou, o menu já deve funcionar corretamente.


Alterando para os seus links 


Voltando ao passo 1 desse tutorial, onde você colocou o código em um html/javascript, lembra?

Você precisa saber que:

• Uma linha simples como essa, é cada link sozinho lá no menu:

<li><a href='/search/label/Moda'>Moda</a></li>

Se você quiser colocar mais links como esse, é só copiar essa linha acima e colar antes do </ul> , como na imagem:

Aprenda a fazer menu de subcategorias no blogger! Menu dropdown

• Esse é o código com submenu (que quando você passa o mouse, aparece mais).

<li><a href='#'> Categorias  </a>

<br />

<ul class="menus">
<li> <a href="/search/label/Categoria 1"> Categoria 1 </a></li>
<li><a href="/search/label/Categoria 2">  Categoria 2  </a></li>
<li><a href="/search/label/Categoria 3">  Categoria 3  </a></li>
<li><a href="/search/label/Categoria 4">  Categoria 4  </a></li>

</ul>

</li>

Se você quiser colocar mais submenus como esse, é só copiar esse código a cima e colar antes do </ul>, como na imagem:

menu de subcategorias no blogger


• Cada linha simples como essa, dentro do submenu é uma categoria:

<li><a href="/search/label/Categoria 4">  Categoria 4  </a></li>

É ela que você vai copiar e colar, caso queira mais categorias no mesmo submenu. Se quiser menos, é essa linha que você vai apagar.

• Se você ver que não estão aparecendo todas as subcategorias, você deve alterar essa parte do código:


#nav ul li:hover ul.menus {
    height: 100px;
}

Altere o 100px; para um número maior, como 130px ou 150px e deve aparecer o resto das categorias.

• Durante o código, eu marquei alguns exemplos em cores diferentes, pra vocês saberem o que era cada link e onde trocar. É só prestar bem atenção para entender e seguir o padrão.  Então:

- Links do menu é pra onde vai quando você clica.
- Nome do link, é o nome que aparece.

/p/sobre.html (marcado em verde)  - Links do menu
Sobre (marcados em azul) - Nomes dos links que aparecem no menu
Categoria 1 (marcado em laranja) - O marcador da categoria no submenu
Categoria 1 (marcados em roxo) - O nome que aparece na categoria do submenu

Alterando as cores 


Os códigos a seguir são encontrados no passo 3.

É só substituir o código das cores que você quer nos locais indicados:

#fff - Cor de fundo do menu
#000000 - Cor do link do menu
#ff6262 - Cor do link quando passa o mouse
#ffe2e2 - Cor de fundo do submenu

Dica: Só colocar #000000 no google, que você vai conseguir pegar o código de qualquer cor que quiser!


- ♥ - 


Ufa! Que post grande hein? kkkk Mas espero que consigam fazer, e que tenham gostado desse tutorial, que além de trabalhoso, foi feito com muito carinho! Ah, não esqueça de conferir a página Extras do blog com várias dicas e tutoriais <3 

Gostou do post? Tem dúvidas? Teve problemas com o tutorial? Comente! 

Com amor,
Lariz

Comente com o Facebook:

9 comentários:

  1. Ai que bom eu tava atrás de um tutorial assim, mas tem como você me explicar como colocar as redes sociais e a barra de pesquisa junto ao menu?

    ResponderExcluir
    Respostas
    1. ♥ ♥ Aí é assunto pra outro tutorial miga kkkkkk. Mas se você tiver o código da barra de pesquisa, e o código das redes sociais, é só ir lá no passo 1 e colar esses códigos acima do último /ul que fica no meio de <> (o blogger não deixou eu botar o código aqui)

      Excluir
  2. Meu muito obrigada amanhã já coloco em prática

    ResponderExcluir
    Respostas
    1. Oi Sabrina ♥ Coloca sim, depois vem me mostrar como ficou!

      Excluir
  3. Que post incrível! Muito bacana encontrar quem faça tutorias e ajude outros blogueiros assim <3

    Beijão Lari,
    Quase Mineira

    ResponderExcluir
    Respostas
    1. Obrigada Stephanie ♥ Ahhh, muito feliz com seu comentário! Beijos :D

      Excluir
  4. Nossa, adorei, tava até pensando em como ia fazer isso no meu haha
    Vou salvar o link para dar uma olhadinha melhor depois, amei mesmooo
    beijooos e obrigada por ensinar ><
    Acesse Neoguedes

    ResponderExcluir
  5. Olá, eu fiz direitinho e até procurei por " tabs-inner .section:first-child { " e não encontrei mas as páginas ficam abaixo do cabeçalho e não sei o que faço. Eu tinha testado anteriormente e tinha dado certo, mas agora não mais !

    ResponderExcluir
  6. Gostaria de agradecer imensamente pelo post! Demorei para conseguir ajeitar no meu blog, por mais que nos blogs de teste estivessem dando certo no original não dava, até que reparei na dica de mudar de 100px para mais.
    Obrigada, Lariz e sucesso.

    ResponderExcluir

• 2015 - 2017 Feito com ♥ por Lariz Santana