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
Este comentário foi removido pelo autor.
ResponderExcluirinfelismente 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
ResponderExcluirAndrea, 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.
Excluirola, é lindo, mas funciona só para o modelo simples do blogger?
ResponderExcluirDanny 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!
ExcluirNão dar pra copiar o código flor !
ResponderExcluirAjeita isso ! Beijos :)
Meu blog: https://adoreichel.blogspot.com.br/
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!
ExcluirEu estava procurando por esse tutu. Amei, obrigado <3
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirOlÁ tUDO BEM? GOSTARIA de saber se voce faria um layout para meu blog,pode me responder no imail:valerialuz20@hotmail.com
ResponderExcluirPesquisei muito, e só essé é que deu certo, muito obrigado, parabéns pelo trabalho
ResponderExcluirOi, 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?
ResponderExcluirMuito obrigada!