 |
| Como colocar Menu Scroll Fixo |
Boas pessoal bem vindos a mais um tutorial do Uncomplicated Works, e hoje irei ensinar como colocar um menu scroll fixo. Hoje em dia é muito usual vermos em blogs um menu depois da header e quando movimentamos a barra de rolagem esse menu fica sempre no topo no blog. Este menu é bastante útil uma vez que o leitor irá ter interação com o blog, podendo mudar de tema quando quiser, sem ter de puxar a barra de rolagem para cima, porque este menu sempre ficará visível no topo. Vamos agora deixar de conversa e aprender a colocar o menu scroll fixo.
O menu irá ficar deste género: Menu Scroll Fixo
Em primeiro lugar, vamos a Modelo -> Editar HTML e pressionamos CTRL + F e pesquisamos por </head> e antes colocamos o seguinte código:
<script src='http://code.jquery.com/jquery-2.1.4.min.js' type='text/javascript'/>
<script>
jQuery("document").ready(function($){
var nav = $('.nav-uw');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
nav.addClass("uw-nav");
} else {
nav.removeClass("uw-nav");
}
});
});
</script>
Para colocarmos menu scroll fixo vamos precisar de usar código JQuery, a primeira parte do código é a biblioteca onde a segunda parte irá buscar a informação para funcionar, basicamente, se vocês já usam código jquery no vosso blog, não precisam de colocar esta parte:
<script src='http://code.jquery.com/jquery-2.1.4.min.js' type='text/javascript'/>
Contudo se o código não estiver a funcionar adicionem para ver se é a falta da biblioteca que não está a deixar o código funcionar.
A segunda etapa é adicionar o código CSS, para isso pesquisamos por ]]></b:skin> e antes adicionamos o seguinte código CSS
.nav-uw {
height:51px;
background: black;
border-bottom: 3px solid red;
list-style: none;
color: #DDDDDD;
}
.nav-uw li {
transition: 1s;
}
.nav-uw li:hover {
background-color: red;
}
/******Depois de rolar a página, este código será ativado uncomplicatedworks.com******/
.uw-nav {
z-index: 9999;
position: fixed;
top: 0;
width:100%;
left: 0;
}
Feito isto apenas nos resta uma etapa, que é colocar o código HTML do menu fixo, então para isso guardamos o modelo e vamos a Esquema -> Adicionar uma miniaplicação -> HTML/JavaScript e colocamos este código:
<nav class="nav-uw">
<li><a href="">Início</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Contactos</a></li>
<li><a href="">Teste1</a></li>
<li><a href="">Teste2</a></li>
<li><a href="">Teste3</a></li>
<li><a href="">Teste4</a></li>
</nav>
<a href="URL_DESTINO">Nome que irá aparecer</a></li>
 |
| Como colocar Menu Scroll Fixo |
Feito isto colocamos o menu em cima das mensagens de blogue e aplicamos. Temos o nosso menu scroll fixo, se não conseguirem colocar, deixem nos comentários as dúvidas que eu irei certamente ajudar. Espero que tenham gostado da aula como colocar menu scroll fixo.
Sem comentários:
Enviar um comentário