20 novembro 2018

Menu fixo quando rola a página - Tutorial

menu ao rolar a página
 Foto de Ylanite Koppens

Olha quem voltou! Dessa vez sem aquelas promessas de ficar pois nunca cumpro haha Admito que sou uma péssima blogueira mas tenho os meus motivos, juro!
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.

1- Primeiramente você vai criar todas as páginas que você deseja que tenha no seu menu. Caso você ainda não saiba como criar uma página estática no seu blog, eu já ensinei nesse tutorial.
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>

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;}



 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>

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?

4 comentários:

  1. Amei seu post, admiro quem sabe mexer com esses códigos, eu me perco toda..

    www.kailagarcia.com

    ResponderExcluir
  2. Eu 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!

    Um beijo!
    Hey, Maria! | Fanpage

    ResponderExcluir
  3. Adorei o tutorial, estou querendo mudar o layout do blog e futuramente vou gostar de usar os seus tutoriais :).
    Beijos,
    Mundo Perdido da Carol
    Instagram: @carolinsweet
    Fan Page

    ResponderExcluir
  4. muito legal essa dica pro menu fixo, preciso mexer em algumas coisas no meu layout

    www.tofucolorido.com.br
    www.facebook.com/blogtofucolorido

    ResponderExcluir