Olá Prezados Leitores, no artigo de hoje venho ensinando como colocar um menu ocultável no topo do seu blogger, bem, o menu possui um efeito de transição juntamente com a propriedade Hover. E por isso que ele é ocultável.
Instalando o Javascript
1. Faça o login no Blogger
2. Depois vá na opção Modelo
3. Depois em Editar HTML
4. E Procure pela seguinte tag:
</head>
5. E Cole o código abaixo, antes da tag que citei acima:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function() {(function() {//settingsvar fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;var topbarME = function() { $('#menuopacity').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#menuopacity').fadeTo(fadeSpeed,fadeTo); };var inside = false;//do$(window).scroll(function() {position = $(window).scrollTop();if(position > topDistance && !inside) {//add eventstopbarML();$('#menuopacity').bind('mouseenter',topbarME);$('#menuopacity').bind('mouseleave',topbarML);inside = true;}else if (position < topDistance){topbarME();$('#menuopacity').unbind('mouseenter',topbarME);$('#menuopacity').unbind('mouseleave',topbarML);inside = false;}});})();});</script>
Aplicando o Estilo CSS
1. Vá na opção modelo
2. Em seguida na opção Editar HTML
3. E Procure por:
]]></b:skin>
4. E Cole o código abaixo logo acima da tag que citei (]]></b:skin>):
#menuopacity {border-bottom:1px solid #ECF1EF; /*--Edite borda--*/background:#151715; /*--Edite cor de fundo--*/padding:10px 20px;position:fixed;top:0;left:0;z-index:2000;width:100%;}#menuopacity a:link {color:#fff; /*--Edite cor--*/padding:3px 3px 3px 3px;border:1px solid #666; /*--Edite borda--*/-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
5. E Edite as partes que estão de vermelho!
Inserindo o código HTML
1. Vá na opção Modelo
2. Depois na opção Editar HTML
3. Em seguida procure por:
<div id='header-wrapper'>
4. E cole o seguinte código abaixo dele:
<div id='menuopacity'><a href='SEU-LINK'>TITULO 1</a><a href='SEU-LINK'>TITULO 2</a><a href='SEU-LINK'>TITULO 3</a></div>
5. Edite as partes de Verde pelo link da página do menu.
Também Edite as partes de Vermelho pelo o titulo do link da página.
6. Caso Queira adicionar mais de uma página, basta adicionar o seguinte código:
<a href='SEU-LINK'>TITULO 3</a>
Tudo Pronto, espero que gostem, qualquer duvida basta comentar.
4 Comentários
Esse menu é ótimo. Bom demais da conta, ainda mais com o efeito transitório que tem, show. obrigado pelo tuto.
23 de fevereiro de 2012 às 09:25Concordo com você André. Obrigado você! Até mais.
23 de fevereiro de 2012 às 12:29Abraços.
Caio Vinicius - Tecnoblog
Tem algum exemplo pra mim ver como é este menu?
11 de agosto de 2012 às 16:36Olá Gustavo, irei produzir um DEMO do menu, aguarde! :D
11 de agosto de 2012 às 19:23Postar um comentário
Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!