Menus Vanessa S.
Menu auto ocultável no topo do blog
Neste tutorial você vai aprender como adicionar um menu no topo do blog.
A diferença deste menu é que ele é auto ocultável e utiliza o efeito opacity e JQuery.
Este script funciona em conjunto com a biblioteca do JQuery na versão 1.4.2, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela.
1º passo – Instalar o Javascript:
Copie o código abaixo e cole-o antes de </head>
<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() {
//settings
var 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 events
topbarML();
$('#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>
2º passo – Aplicar estilos CSS:
Vá no menu “modelo”, entre na edição HTML do seu template, não precisa clicar em “expandir modelos de widgets” e procure pela tag ]]></b:skin>
e cole o seguinte código logo ACIMA dela:
#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;
}
Não esqueça de editar as cores.
3º passo – Inserir o código html:
Agora vamos inserir o menu para que ele fique visível acima da barra de cabeçalho.
Procure por:
<div id='header-wrapper'>
e cole o seguinte código logo ACIMA 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>
Insira seus links no menu nos locais destacados, e não esqueça de incluir também o nome de seus links.
Se estiver usando template designer de modelo do blogger, cole o código logo acima da tag <header>
Demo
Vanessa,
Fico feliz que tenha gostado da modificação que fiz no menu que você nos ensinou a fazer. E muito obrigado pelo convite para fazer uma Guest post, vou preparar o material e assim que eu terminar envio pra você.
Abraço e até a próxima.
Ok. Vou aguardar 😉
Abraços.
Gostaria de saber se posso fazer algumas vídeo aulas baseado nos seus tutoriais. Desde já agradeço, abraço e até mais.
OI Sandro,
Eu te autorizo sim, mas desde que vc faça uma menção ao artigo que vc se baseou 🙂
Abraços.
Primeiramente muito obrigado por me autorizar a fazer as vídeo aulas baseado nos seus tutoriais mas venho te perguntar como registrar a autoria de algum widget pois criei um baseado no seu tutorial você pode dar uma olhada no meu blog, é a barra de pesquisa auto ocultável. Muito obrigado por tudo e desde já agradeço pela a atenção.
Geralmente qdo eu desenvolvo algum widget, eu só incluo o link no rodapé do widget, tipo: “Widget By MB”ou então coloco só o link para o post onde eu ensino a instalar o widget com um “instale este widget”.
Gostei do efeito na barra de pesquisa…Vc quer publicar um tutorial Guest post, aqui no Mundo Blogger, ensinando a instalar o widget que vc desenvolveu?
Clau gostaria de saber como colocar ele em outros locais,exemplo acima das postagens
Tem como colocar hover nessa barra??
Po, alguem tem algum exemplo dele ai funcionando?
e para aplicar um efeito 'zoom' quando se passa o mouse sobre um dos links do menu?
E como eu faço para fazer um menu assim, porém fixo no cabeçalho do blog? E para mudar a font?
Lucas Rafael
Por favor leia o meu comentário de nº2.
Clau tem como o menu ficar fixo no topo?
Se tiver está opção me responda pf, bjos!
@Nauan:
Se existe esta possibilidade, eu não conheço.
Tem como colocar pra fechar o Menu Auto Ocultável não?
@Orichalcum the Hedgehog:
Vc tem q aplicar estilos ao texto. Dá uma olhada neste artigo que vai te ajudar:
A propriedade CCS Text (text-transform)
Boa tarde.
Tem uma forma de deixar as letras do menu começando a primeira letra em Maiuscula? Pois no padrão ele as deixa todas em MAIUSCULA.
Ah sim descobri… Eu estava add as etapas 1,2,3 todas de uma vez só sem salvar o template. Quando passei a add um por vez e salva-las funcionou perfeitamente…Muito bom mesmo esse menu.
Parabéns.
Showwwwwwwwwwwwwwwwwwwwww de bolaaaaaaaaaaaaaaaaaaaaa
facim facim
valew
Olá eu excutei esse seu menu no meu blog de teste "http://keepersofmetal1.blogspot.com", mas de alguma forma ele não funcionou principalmente a parte ocultável que achei show no seu blog demo.
Parabéns ::Clau:: como sempre fazendo excelentes trabalhos.
Sim, eu li, mas eu achava que poderia fazer algum outro tipo de efeito, com algum codigo, etc, mas ta tudo bem.
Obrigado
E eu vi sim, aqui outro tipo de menu e acho que vou usar ele em meu blog, Obrigado pela atenção.
@Dantas Neto:
Se vc leu o tutorial percebeu q este menu é assim, este é o efeito dele! Mas se vc quiser outro tipo de menu, aconselho a procurar no nosso indice "Tutoriais Blogger", que lá vc vai encontrar outros menus e pode escolher alguns dos que estão lá.
Oi, eu visito o site a pouco tempo e o mesmo e um dos melhores que já vi, mas eu tenho uma pergunta, será que não tem como dar um efeito diferente no menu?
Agradeço a resposta e parabéns pelo ótimo trabalho que faz aqui.