Menu sanduíche no Blogspot

Front-end HTML
#1

Olá, eu tenho um blog no Blogspot que tem menus, eu uso o seguinte código para exibi-los:

<div id="menu">
<ul>
<li><a href="https://thallysson-klein.blogspot.com.br/">Início</a></li>
<li><a href="https://thallysson-klein.blogspot.com.br/search/label/ilustracoes">Ilustrações</a></li>
<li><a href="https://thallysson-klein.blogspot.com.br/search/label/webdesign">Web design</a></li>
<li><a href="https://thallysson-klein.blogspot.com.br/search/label/gamedesign">Game design</a></li>
<li><a href="https://thallysson-klein.blogspot.com.br/search/label/HQs">HQs</a></li>
<li><a href="http://thallysson-klein.blogspot.com.br/p/thallysson-klein-contato.html">Contato</a></li>
</ul>
</div>

Alguém sabe me dizer como eu faço para que esse menu seja exibido na versão mobile em formato de menu sanduíche?

#2

Tem dois artigos bem legais no Tableless que vão resolver seu problema.

Fazendo um slide menu mobile – sem plugin
Menu Retrátil com CSS e jQuery

1 curtida
#3

Okay, vi os exemplos…só tem um problema…no desktop não gostaria que esse menu fosse retrátil, gostaria que mudasse de acordo com o tamanho da tela, assim como uma página bootstrap, seria possível isso?

#4

No site codepen tem vários exemplos de como fazer o que queres. Dá uma pesquisa por menu responsive que vai achar vários.

Achei esse que é bem simples, mas acho que resolve.

1 curtida
#5

Bom, eu testei esse exemplo aí. Ficou um pouco estranho mas acho que consigo corrigir no CSS. Se eu diminuo a largura da janela no PC funciona, porém quando eu acesso pelo celular não. Acredito que seja porque o Blogger automaticamente quando uma página é acessada pelo celular ele deixa a URL assim: url_do_blog/?m=1

Acho que preciso aprender a tirar isso. Alguma ideia? A URLdo meu blog ficou assim: http://www.thallyssonklein.tk/?m=1

#6

Thallyson o que você está querendo são informações sobre Media Query

Pode conhecer mais sobre isso aqui: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Dessa forma você consegue manipular seu CSS para os devidos devices.

1 curtida
#7

Interessante, só que tipo, o Blogger carrega a página de forma diferente no celular, tanto que o menu nem mesmo aparece. Eu deveria tentar mudar essa configuração mexendo nos códigos do meu blog ou simplesmente fazer do mesmo jeito tentando com media query?

#8

Foi difícil, mas eu consegui :smile:. Usei esse link como referência:

Editado: Eu consegui exibir o menu na versão mobile, depois colei o código do exemplo do @lciceris. Aparentemente está tudo funcionando, menos o botão que deveria abrir o menu sanduíche que não está funcionando. Preciso ver porque isso acontece ainda.

1 curtida
#9

Veja se não tem algum erro de js no console, pode ser algum conflito ou algo assim.

1 curtida
#10

O problema eu acho que era por causa que o código usava JQuery e em nenhum momento vi ele sendo carregado. Enfim, eu procurei outros exemplos na web como esse, encontrei outro e consegui resolver meu problema. Muito obrigado a todos pela ajuda. Se quiserem ver o blog com o problema resolvido: http://www.thallyssonklein.tk