Menu sanduíche no Blogspot

30 de novembro de 2017 9 respostas Resolvido

Thallysson 30 de novembro de 2017

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?

9 Respostas

lciceris 3 de dez. de 2017 1 like

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

Thallysson 4 de dez. de 2017

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?

lciceris 5 de dez. de 2017 1 like

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.

Thallysson 10 de jan. de 2018

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

GabrielHougaz 10 de jan. de 2018 1 like

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.

Thallysson 10 de jan. de 2018

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?

Solucao aceita

Thallysson 10 de jan. de 2018 1 like

Foi difícil, mas eu consegui . 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.

lciceris 10 de jan. de 2018 1 like

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

Thallysson 10 de jan. de 2018

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

Criado 30 de novembro de 2017

Ultima resposta 10 de jan. de 2018

Respostas 9

Participantes 3

9 Respostas

Topicos relacionados