Foto de Ylanite Koppens
O post de hoje é a pedido de uma seguidora. Diariamente recebo mensagens no Instagram de pessoas que tem dúvidas de como começar um layout do zero, sempre vou anotando as dúvidas e aos poucos vou soltando vários tutoriais legais aqui para vocês!
No tutorial de hoje vou ensinar como fazer aqueles menus que só ficam visíveis quando a gente rola a página. É super simples de colocar no seu layout e tem vários jeitos legais de personalizar! Hoje vou trazer um bem simples como se fosse um menu "base" e vocês vão personalizando da maneira que preferirem.
2- Agora vá em Editar HTML e cole o seguinte código ABAIXO de <header>
<div class='menu-base'>
<div class='menu'>
<ul>
<li><a href='/'>Início</a></li>
<li><a href='COLOQUE O LINK AQUI'>Sobre</a></li>
<li><a href='COLOQUE O LINK AQUI'>Contato</a></li>
<li><a href='COLOQUE O LINK AQUI'>Anuncie</a></li>
<li><a href='COLOQUE O LINK AQUI'>Parceria</a></li>
</ul>
<div class='clear'/>
</div>
</div>
<div class='menu'>
<ul>
<li><a href='/'>Início</a></li>
<li><a href='COLOQUE O LINK AQUI'>Sobre</a></li>
<li><a href='COLOQUE O LINK AQUI'>Contato</a></li>
<li><a href='COLOQUE O LINK AQUI'>Anuncie</a></li>
<li><a href='COLOQUE O LINK AQUI'>Parceria</a></li>
</ul>
<div class='clear'/>
</div>
</div>
Você terá que pegar o link da sua página estática e colar onde se pede. Tenha atenção para não excluir as aspas. Você pode colocar as páginas que desejar.
3- Logo em seguida, clique em Ctrl + F e pesquise por ]]></b:skin> no seu código. Cole o código a seguir ACIMA de ]]></b:skin>
.menu-base {
background: #fb878700;
font-family: Arial, Helvetica, sans-serif;
font-size: 0px;
width: 1062px;
color: #ccc0;
}
.menu-fixo {
z-index: 9999;
position: fixed;
top: 0;
width: 100%;
height: 37px;
background: royalblue;
margin: 0 0 0 -146px;
}
.menu { height: 37px;}
.menu ul {
list-style: none;
margin: 0 0 0 426px;
}
.menu ul li {
float: left;
margin-top: 6px;
padding: 6px;
}
.menu ul li:first-child { padding-left: 0;}
.menu-fixo a {
color: #fff;
text-decoration: blink;
font-size: 12px;
text-align: center;
text-transform: uppercase;
}
.menu-fixo a:hover { color: #777; text-decoration: underline;}
background: #fb878700;
font-family: Arial, Helvetica, sans-serif;
font-size: 0px;
width: 1062px;
color: #ccc0;
}
.menu-fixo {
z-index: 9999;
position: fixed;
top: 0;
width: 100%;
height: 37px;
background: royalblue;
margin: 0 0 0 -146px;
}
.menu { height: 37px;}
.menu ul {
list-style: none;
margin: 0 0 0 426px;
}
.menu ul li {
float: left;
margin-top: 6px;
padding: 6px;
}
.menu ul li:first-child { padding-left: 0;}
.menu-fixo a {
color: #fff;
text-decoration: blink;
font-size: 12px;
text-align: center;
text-transform: uppercase;
}
.menu-fixo a:hover { color: #777; text-decoration: underline;}
royalblue é a cor do background, você pode mudar para a cor que mais combine com seu blog.
4- Agora pesquise por </head> e cole o código ACIMA dele.
<script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery("document").ready(function($){
var nav = $('.menu-base');
$(window).scroll(function () {
if ($(this).scrollTop() > 170) {
nav.addClass("menu-fixo");
} else {
nav.removeClass("menu-fixo");
}
});
});
</script>
<script type='text/javascript'>
jQuery("document").ready(function($){
var nav = $('.menu-base');
$(window).scroll(function () {
if ($(this).scrollTop() > 170) {
nav.addClass("menu-fixo");
} else {
nav.removeClass("menu-fixo");
}
});
});
</script>
170 é a altura que o seu menu irá aparecer, você pode mudar para a que melhor se adaptar ao seu blog.
E é isso! O menu já estará funcionando perfeitamente no seu blog.
Se você quiser algum tutorial específico é só pedir aqui nos comentários, no e-mail ou até mesmo no meu instagram! Estou anotando todos os pedidos de vocês e vou tentar postar com mais frequência.
Espero que tenham gostado e que não desistam de mim haha Eu demoro mas sempre volto, ok?
Amei seu post, admiro quem sabe mexer com esses códigos, eu me perco toda..
ResponderExcluirwww.kailagarcia.com
hahah tem que ter paciência, as vezes acabo me perdendo também
ExcluirEu me perco um pouco na hora de arrumar o layout do meu blog, mas com a ajuda de tutoriais assim eu consigo deixar tudo bonitinho. Espero que esse tutorial ajude bastante gente!
ResponderExcluirUm beijo!
Hey, Maria! | Fanpage
Se seguir direitinho dá tudo certo! Também espero que ajude ♡ Obrigada pelo comentário
ExcluirAdorei o tutorial, estou querendo mudar o layout do blog e futuramente vou gostar de usar os seus tutoriais :).
ResponderExcluirBeijos,
Mundo Perdido da Carol
Instagram: @carolinsweet
Fan Page
Fico feliz por ajudar, boa sorte com o novo layout ♡
Excluirmuito legal essa dica pro menu fixo, preciso mexer em algumas coisas no meu layout
ResponderExcluirwww.tofucolorido.com.br
www.facebook.com/blogtofucolorido
Que bom que gostou ♡ Obrigada pelo comentário
ExcluirAdorei esse tutorial, estava procurando já tinha um tempo.
ResponderExcluir