Como colocar Menu Scroll Fixo

Como colocar Menu Scroll Fixo

• Aprenda a colocar menu fixo no topo do blog
• Três diferentes menus para o Blog

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(&quot;document&quot;).ready(function($){

    

    var nav = $(&#39;.nav-uw&#39;);

    

    $(window).scroll(function () {

        if ($(this).scrollTop() &gt; 100) {

            nav.addClass(&quot;uw-nav&quot;);

        } else {

            nav.removeClass(&quot;uw-nav&quot;);

        }

    });

});

</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.

0 Comentários Continuar a ler »

Como colocar Menu no Topo do Blogger ~ Uncomplicated Works

Menu no Topo - Blogger

• Aprenda a colocar um Menu Scroll Fixo - Novidade
• Três diferentes menus para o Blog

Boas pessoal! Bem-vindos ao primeiro tutorial do Blogger Uncomplicated Works, e como o nome indica, não vamos fazer nada de complicado: o tutorial é sobre o menu fixo no topo. Como podem ver no meu blog existe uma barra fixa no topo, que contém as categorias do meu blogger assim como uma caixa de pesquisa, e neste tutorial vou apenas ensinar a colocar as categorias e depois mais tarde irei abordar a colocação de uma caixa de pesquisa e ícones para as redes sociais. Caso estejam interessados nisso neste momento, deixem algo nos comentários, e irão obter a minha ajuda. Contudo, para já vamos apenas criar o menu fixo no topo, que é como eu já disse, bastante simples. A primeira etapa para colocarmos o menu fixo no topo do blogger, é inserirmos este código no HTML do blog. Este código terá de ser colocado depois de " <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> " Podem simplesmente pressionar Ctrl + F para uma busca mais rápida.

<div class='menutopo'>
<nav class='menu'>
<a href='#' title="Home" >Home</a>
    <a href='#' title="Templates" >Templates</a>
    <a href='#' title="Tutoriais">Tutoriais</a>
    <a href='# title="Windows"'>Windows</a>    
</nav>
</div>

Depois de inserir o código HTML do nosso menu fixo vamos modificá-lo a nosso gosto, onde se encontra # colocamos o url desejado. O title é a informação que irá aparecer quando o rato estiver sobre o texto e o que se encontra entre >Aqui</a> substituímos de forma a que o menu fique do nosso agrado. Para que o menu fixo no topo do blogger esteja pronto, só necessitamos de inserir o código CSS, pressionamos Ctrl+F e pesquisamos por ]]></b:skin> e antes disso vamos colocar o seguinte código:

nav.menu a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
text-decoration: none;
font-family: 'Laila',serif;
font-size: 18px;
color: rgba(30, 144, 255, 0.7);
transition: border 0.3s, color 0.4s linear;
}
.menutopo {
position: fixed;
height: 60px;
width: 100%;
z-index: 1;
background: black;
}

nav.menu a:hover {
color: white;
border-bottom: 3px solid white;

}

Feito isto, temos o menu no topo do blogger assim: Teste Menu

Para modificarem o menu a vosso gosto, podem alterar algumas partes como:

'color: red' - color define a cor do texto, ou seja, depois dos dois pontos vamos colocar a cor que nós desejamos, onde aparece nav.menu a:hover é a cor do texto quando o rato está sobre o texto.

'background: black' - define a cor do fundo do menu, alterem para os valores que desejarem.

4 Comentários Continuar a ler »