Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
<div id="wrapper">
<ul id="menu">
<li><a href="#servicos" class="tab">Serviços</a></li>
<li><a href="#clientes" class="tab">Clientes</a></li>
<li class="logo_centro">
<img src="img/logo_res.png" />
</li>
<li><a href="#intranet" class="tab">Intranet</a></li>
<li><a href="#contato" class="tab">Contato</a></li>
</ul>
</div>Bom dia.
Eu não consigo centralizar o menu. Sempre apanho com isso.
Outra coisa, eu gostaria que quando eu descesse a barra de rolagem, queria que o menu parasse em cima no topo... igual o do Facebook. Obriggado.
#wrapper{
background: #202020;
width: 100%;
display: block;
height:40px;
position: relative;
}
#menu{
padding:0;
list-style: none;
width: auto;
color: #FFF;
float: left;
margin: 0 auto;
line-height:40px;
display: block;
}#menu li{
float:left;
padding:0;
width:130px;
text-align: center;
border-left:1px dashed #FFF;
}#menu li a{
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-khtml-transition: all .3s ease-out;
transition: all .3s ease-out;
opacity: .7;
font-family: 'Ruda', sans-serif;
font-weight: bold;
font-size:14px;
}O Menu centralizado eu consegui resolver.
Agora a questão é essa rolagem...
Meu menu fica em baixo de uma DIV.
Quando eu desço a barra de rolagem o menu para no topo e se fixa, isso beleza.
Mas quando eu subo a barra até o topo, o menu sobe junto. Ou seja, ele não volta para seu local de origem, ou para debaixo da DIV novamente.
Essa class fix, eu defino o menu Top 0 position fixed.
if ($("#menu").size())
{
$(window).scroll(function ()
{
var $filterSpacer = $('<div />', {
"class": "filter-drop-spacer",
"height": $("#menu").outerHeight()
});if (!$("#menu").hasClass('fix') && $(window).scrollTop() > $("#menu").offset().top)
{
$("#menu").before($filterSpacer);
$("#menu").addClass("fix");
}$("#menu").removeClass("fix");
$filterSpacer.remove();
}
});
}Use somente o } else {, por que o script já captura a altura do menu em relação ao topo.
if (!$("#menu").hasClass('fix') && $(window).scrollTop() > $("#menu").offset().top){
$("#menu").before($filterSpacer); $("#menu").addClass("fix");
} else {
$("#menu").removeClass("fix"); $filterSpacer.remove();
}O duro que essa expressão $(window).scrollTop() > $("#menu").offset().top é sempre verdadeira quando estou abaixo do Topo... o que está correto. E quando subo era pra voltar.
Eu fiz o que você falou, deu certo. Mas o menu fica piscando. Eu fixei 250 nessa offset().top e deu certo....
Quando eu clico na âncora a página dá uma piscada. Que raiva.
Aê, acabei de resolver essa piscada dando um return false.
Legal, parabéns :thumbsup:
No id menu experimente definir uma largura, o resto está certo.
Para deixar fixo no topo ou em qualquer lugar, use a regra position: fixed; Mas se você quiser que em algum ponto da rolagem o topo fique fixo, dê uma olhada nesse post, http://forum.imasters.com.br/topic/491431-lateral-que-acompanha-o-site-assim-como-no-facebook/
Boa sorte ai :thumbsup: