Menu Responsivo DropDonw para blogger

fevereiro 09, 2016


Galera, no tutorial de hoje eu vou ensinar pra vocês como colocar um menu fixo e responsivo no topo do blog, desses que quando você rola a página ele acompanha. Parece complicado mas não é, esse menu é simples e muito eficiente. Quando você abre o blog pelo celular ele se ajusta a largura da sua tela e ainda esconde os links de cada aba em uma caixinha. Vamos ao tutorial ?

MENU RESPONSIVO

!!! ATENÇÃO, FAÇA UM BACKUP DO SEU TEMPLATE ANTES DE MODIFICAR QUALQUER COISA!!!

// Primeiramente abra o Painel do blogger >> Modelo >> Editar HTML  e procure pelos códigos do seu antigo menu (se você já possuir um) e apague.

// Aperte Crtl+F e procure pelos seguintes códigos: <b:if cond='data:blog.isMobile'> <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>

// SUBSTITUA os códigos encontrados por estes aqui: <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
// Na caixa de pesquise procure por ]]></skin> quando encontrar, ACIMA disso cole o código abaixo:
/*-----MENU RESPONSIVO - DROPDONW - TOPO ----*/ body { margin: 0px; } #menu{ background: #333; /*cor de fundo do menu*/ color: #FFF; /*cor da letra*/ height: 50px; z-index:999; position:fixed; width:100%; top:0; } #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none} #menu ul{height:45px;width:980px} #menu li{float:left;display:inline;position:relative; font-weight:200; font-family:Georgia; /*fonte do menu */ font-size:18px;} /*tamanho da letra*/ #menu a{display: block; line-height: 40px; padding: 0 14px; text-decoration: none; color: #FFF; } #menu li a:hover{ color: #ccc; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } #menu input{display:none;margin:0 0; padding:0 0; width:80px; height:30px;opacity:0;cursor:pointer} #menu label{font:normal 30px Georgia;display:none; width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:16px;position:absolute;left:35px} #menu ul.menus{ height: auto; overflow: hidden; width: 170px; background: #FF82AB; position: absolute; z-index: 99; display: none; } #menu ul.menus li{ display: block; width: 100%; font:normal 0.8em Arial; text-transform: none; text-shadow: none; border-bottom: 1px dashed #FFF; } #menu ul.menus a{ color: #FFF; line-height: 35px; } #menu li:hover ul.menus{display:block} #menu ul.menus a:hover{ background: #333; color: #FFF; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } @media screen and (max-width: 800px){ #menu{position:relative} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0; z-index:3;height:auto;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block} }

//Pesquise na caixa agora por <body> e logo ABAIXO disso cole o seguinte código:
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>MENU  </span></label>
<ul>
<li><a expr:href='data:blog.homepageUrl'>INÍCIO</a></li>
<li><a href='LINK AQUI'>SOBRE</a></li>
<li><a href='#'>CATEGORIAS<font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='LINK AQUI'>Categoria 1</a></li>
<li><a href='LINK AQUI'>Categoria 2</a></li>
<li><a href='LINK AQUI'>Categoria 3</a></li>
<li><a href='LINK AQUI'>Categoria 1</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>CONTATO</a></li>
<li><a href='#'>CATEGORIAS<font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='LINK AQUI'>Categoria 1</a></li>
<li><a href='LINK AQUI'>Categoria 2</a></li>
<li><a href='LINK AQUI'>Categoria 3</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>TERMOS</a></li>
       </ul>
    </nav>

// Existe duas ocorrências da tag BODY, uma com <body> e outra </body> você vai trabalhar com a PRIMEIRA OCORRÊNCIA. 

// Faça as alterações indicadas dentro do código, não tendo nenhum erro clique em salvar, mas só depois de visualizar e ver que está tudo certinho. Pelo amor de Deus! rs

Bom é isso, o código é extenso, mas com atenção você consegue, ta tudo explicadinho direto no código, altere só onde esta marcado. Qualquer dúvida deixa aqui nos comments. Beijo!

*obs: tutorial atualizado em 27/07/2016

Compartilhe esse post:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. infelismente tem alguns erro esse menu, tem como ensinar esse seu ? quando coloco abaixo da tag bodyy ( não da pra escrever correto ) ele fica no rodapé do blog

    ResponderExcluir
    Respostas
    1. Andrea, eu testei o menu e ele está ok, tanto que é esse mesmo código do tutorial que eu uso aqui no blog, apenas mudei a cor e a letra, mas é o mesmo. Existe duas tags BODY no blog, uma logo no inicio e outra quase no final. Você precisa colocar o código abaixo da primeira. Para ajudar a localizar, procure por <div id='header' esse é um pedacinho do trecho que corresponde ao seu cabeçalho, cole o segundo código logo ACIMA disso, na linha acima desse trecho. Acredito que isso já vai ajudar. Qualquer duvida, deixe aqui nos comentários.

      Excluir
  3. ola, é lindo, mas funciona só para o modelo simples do blogger?

    ResponderExcluir
    Respostas
    1. Danny eu já testei ele em quase todos os modelos, inclusive aqui no meu que você pode ver que é bem modificado. Acredito que ele vai funcionar em qualquer modelo do blogger. Vale a penas testar antes, salve seu template e up depois em um blog de teste, ai você tenta colocar esse menu. Se funcionar você faz o mesmo no seu blog oficial. Beijo!

      Excluir
  4. Não dar pra copiar o código flor !
    Ajeita isso ! Beijos :)

    Meu blog: https://adoreichel.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Michele. Eu bloqueei o uso do botão direito no blog para evitar plágios em estruturas HTML e CSS do blog, mas você pode selecionar o código e usar uma combinação de teclas: "CTRL + C" que serve para copiar. Beijo!

      Excluir
  5. Eu estava procurando por esse tutu. Amei, obrigado <3

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
  7. OlÁ tUDO BEM? GOSTARIA de saber se voce faria um layout para meu blog,pode me responder no imail:valerialuz20@hotmail.com

    ResponderExcluir
  8. Pesquisei muito, e só essé é que deu certo, muito obrigado, parabéns pelo trabalho

    ResponderExcluir
  9. Oi, amei demais o seu blog, principalmente o tutorial. Contudo encontrei um problema: Infelizmente, sobrou um grande espaço ao lado esquerdo do menu e ele não preencheu o espaço da tela inteira. Como resolver?


    Muito obrigada!

    ResponderExcluir