A pergunta que mais recebo é de usuários do Blogger que desejam saber como fazer seu menu de navegação flutuar enquanto o usuário percorre a página. Isso pode ser muito útil e adicionar à sua experiência de usuário, pois o visitante não terá que percorrer todo o caminho de volta até o topo da página para ver o seu menu links.
Método 1: Menu no início do conteúdo
A primeira e mais fácil maneira de fazer isso é simplesmente posicionar o menu de navegação no topo da página e permitir que ele fique em uma posição fixa (flutuante) quando o usuário rola para baixo. Mantendo o seu menu no topo da sua página irá evitar ter que adicionar qualquer JavaScript, por isso, se você não está confortável com a edição do código do seu blog, então este é o método para você! Aqui está um exemplo:
Certifique-se de que você adicionou o widget "Páginas" do Blogger a uma das áreas de cabeçalho na página Layout (os espaços de cruzamento de Cross-Column ou Cross-Column2). Em seguida, siga as etapas abaixo:
1. Vá até a página Modelo> Personalizar.
2. Selecione Avançado no menu lateral e, em seguida, Adicionar CSS
3. Se você já inseriu CSS personalizado nesta caixa, role para baixo até a parte inferior do seu código
4. Adicione o seguinte código CSS à caixa:
#navbar {display:none}
#PageList1 ul {
position:fixed;
top:0px;
z-index:1000;
background-color:#ffffff;
width:100%;
max-width:1100px;
}
.content-inner {
margin-top:30px;
}
5. Altere a variável "max-width" para a largura total da sua área de conteúdo do blog. Você pode encontrar a largura do seu blog indo até a seção "Ajustar largura" e visualizando o número na área "Todo o Blog".
6. A variável "margin-top" deve ser a altura do seu menu de navegação. Você pode deixá-lo como está se você não tiver
7. Você também pode alterar a variável background-color para um código de cor hexadecimal de sua escolha. Agora está definido como branco.
Método 2: Menu abaixo do cabeçalho
O segundo método é para menus que estão posicionados abaixo da imagem de cabeçalho ou não posicionados diretamente na parte superior da tela ( como este ). Para blogs concebidos desta forma, você vai querer o menu para ficar em sua posição desejada em primeiro lugar, e depois flutuar no lugar como o visitante percorre passado onde está resolvido. Aqui está como conseguir isso:
1. Navegue até a página Modelo> Personalizar.
2. Selecione Avançado no menu lateral e, em seguida, Adicionar CSS
3. Se você já inseriu CSS personalizado nesta caixa, role para baixo até a parte inferior do seu código
4. Adicione o seguinte código CSS à caixa:
#navbar {display:none}
#PageList1 ul {
height:30px;
background-color:#ffffff;
width:100%;
max-width:1100px;
z-index:1000;
}
5. Consulte os passos 5 a 7 acima
6. Salve as alterações e vá até a página Modelo> Editar HTML
7. Dê um click dentro da caixa de códigos e depois CTRL+F pra abrir a caixa de pequisa e nela procure por </head> e depois cole o código abaixo acima ta tag encontrada:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<!--Blogger Floating Menu by I Can Build A Blog.com-->
<script type='text/javascript'>
//<![CDATA[
$(function() {
var nav = $('#PageList1 ul');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
//]]>
</script>
8. Salve as suas alterações e visualize a sua página!
Nota: Se você tiver problemas com o menu e não fizer o que deveria, poderia ser uma questão de ter duplicado scripts jQuery em seu código de blog. Tente remover a primeira linha do código (mostrada novamente abaixo) e salve:
<Script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
Espero que este tutorial tenha sido útil a você!
0 Comments:
Postar um comentário