Este estilo de menu é o que estou usando em meu blog. Um menu que se fixa ao ao topo do blog, ao rolar a barra de rolagem da página até determinado ponto. É algo bem interessante e ao mesmo tempo diferente, deixando seu blog com uma cara moderna e atualizada. Irei dividir o tutorial em duas partes, a primeira que é a parte referente ao código do menu, e a segunda a instalação no blog, inserindo no html, e tudo mais.
Atenção! Estarei usando um modelo simples do blogger, e por isso, se estiver usando um modelo personalizado, é possível que não funciona da forma correta, ou até mesmo não encontre o trecho de código em questão. E nestas circunstâncias, será necessário que tente inserir o código do menu em outro ponto do seu blog.
Confira um Exemplo - o código usado neste exemplo é o mesmo deixado abaixo.
Código do Menu
1. Código HTML<div class="conteudo-menu">
<div class="menu">
<ul>
<li><a href="http://seu-link">Início</a></li>
<li><a href="http://seu-link">Sobre</a></li>
<li><a href="http://seu-link">Contato</a></li>
<li><a href="http://seu-link">Anuncie</a></li>
<li><a href="http://seu-link">Parceria</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
Caso queira adicionar novos links, bastará duplicar linhas de código que estão entre <li></li>, não se limitando apenas a quantidade de páginas do modelo.
2. Código CSS
.conteudo-menu { background: #ededed; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border-bottom: 2px solid #ccc;}
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 880px; height: 37px;}
.menu { height: 37px;}
.menu ul { list-style: none; margin:0; }
.menu ul li {float: left; margin-top: 6px; padding: 6px; border-right: 1px dotted #ccc;}
.menu ul li:first-child { padding-left: 0;}
.menu ul li a { color: #666; text-decoration: blink;}
.menu ul li a:hover { color: #777; text-decoration: underline;}
<script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery("document").ready(function($){
var nav = $('.conteudo-menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 168) {
nav.addClass("menu-fixo");
} else {
nav.removeClass("menu-fixo");
}
});
});
</script>
Instalando em seu blog
A instalação é feita diretamente no código HTML do seu blog, e por isso, aconselho que antes de qualquer modificação, faça Backup do seu template.1. Acesse o painel do blogger, e clique no blog desejado, e selecione Modelo e em seguida Editar HTML.
2. No editor de códigos, clique dentro da caixa de códigos e pressione as teclas Ctrl + F.
3. Procure por </header> e abaixo da tag cole o Código HTML.
5. E por fim, bastará colarmos o Código JavaScript, procurando pela tag </head> e colando o código acima dela.
0 comentários: