Menu flutuante com CSS

• Inicial
• Produtos
• Contato
• Fechar Menu ^

Está na moda sites fazerem aqueles menus que conforme você roda a página ele acompanha.
Seja no topo ou no rodapé.
Se você quer um menu desses mas não sabe como fazer, ou tem dúvidas do que é mais fácil, CSS ou Javascript, está no lugar certo...
Outra prática que está sendo adotada hoje em dia é o menu em lista, isso é, sabe quando você no word coloca aquelas bolinhas do lado das frases fazendo uma lista?

• É isso é que é lista
• Cada item fica em uma linha
• E pode ser ordenada ou desordenada

O ponto é que em um menu flutuante a lista com um item por linha consumirá muito espaço, tendo como ponto de partida que o menu terá apenas 90px de altura,  ele terá apenas uma linha com vários items, letras grandes para fácil entendimento de quem acessa o site.

Pois é, com o CSS é possível estilizar esse tipo de lista e muitas outras coisas...

A principal vantagem é que o CSS é carregado antes de executar o conteúdo do site, isso faz com que o site carregue o conteúdo corretamente, agilizando o processo. Além disso o CSS pode ficar gravado em cache o que favorecerá o carregamento da página de forma mais rápida.

Vamos a estrutura de menu que fiz:

<div id="menu_flutuante">

<img id="logo" src="http://www.ericcorsets.xpg.com.br/logo.png">

<ul>

<a href="http://www.ericcorsets.xpg.com.br/"><li>Inicial</li></a>

<a href="http://www.ericcorsets.xpg.com.br/produtos/"><li>Produtos</li></a>

<a href="mailto:ericcorsets@hotmail.com"><li>Contato</li></a>

<a href="#"><li style="float:right">Fechar Menu ^</li></a>

</ul>

</div>

A tag <div> demarca o começo e o fim do menu, ela é o menu, dentro dela vão os itens nele contidos.

A tag <img> é apenas um demonstrativo de que é possível colocar um logotipo no menu.

A tag <ul> é responsável pela criação de um a lista, dentro dela irão os links de páginas.

A tag <li> representa um item da lista, e a tag pai <a> representa que isso é um link.

Digitando apenas esse código HTML o resultado obtido será uma lista como foi mostrada acima, um item embaixo do outro.

Vamos agora implementar o CSS antes desse código e ver a "mágica" acontecer...

<style>

#menu_flutuante{

position:fixed;

_position:absolute;

top:0;

_top:expression(eval(document.body.scrollTop));

left:0px;

width:100%;

font-size:20px;

background:#FFFFFF;

border-bottom:1px solid #FFFFFF;

}

#logo{

height:90px;

float:left;

}

#menu_flutuante ol{

background:#08009B;

margin:0px;

}

#menu_flutuante li{

float:left;

line-height:80px;

height:80px;

text-align:center;

font-weight:bold;

color:#000000;

list-style:none; 

margin:0px;

padding-right:5px;

padding-left:10px;

margin-left:5px;

border-top:5px solid #FFFFFF;

border-bottom:5px solid #FFFFFF;

background:#FFFFFF;

cursor:pointer;

transition:all 0.1s linear;

-moz-transition:all 0.1s linear;

-webkit-transition:all 0.1s linear;

-o-transition:all 0.1s linear;

}

#menu_flutuante li:hover{

line-height:80px;

height:80px;

border-top:5px solid #05005F;

border-bottom:5px solid #05005F;

}

</style>

O ideal é estudar os estilos CSS de sites que você gosta, para assim aprender melhor como fazer as coisas, a maioria dos sites usa isso hoje em dia, um exemplo é o próprio Facebook.

Pelo Chrome, clicando com o botão direito em algum elemento da página e depois em inspecionar elemento, abrirá um janela para então você ver os estilos que este elemento possui, essa ferramenta é muito interessante pra quem está aprendendo, pois é possível editar o CSS e ver o resultado em tempo real, sem precisar salvar e executar novamente a página...^^

Mas vou explicar um pouco esse código CSS que acabo de passar pra vocês.

A flutuação do menu é dada pelo comando position:fixed , que fixa a div na página, posteriormente é dada a localização de sua posição, no caso top e left = 0px.

O comando _position:absolute e _top:expression(eval(document.body.scrollTop)), são para dar o mesmo efeito em navegadores IE antigos, eles não contam com o fixed, mas eles tem o expression, que é capaz de fazer cálculos em tempo real, sem necessidade de javascript...

A altura do logotipo foi definida pelo comando height:90px, apesar de ser aconselhável dar a largura também, não é obrigatório, pois o navegador faz o cálculo sem problemas.

#menu_flutuante li, serve pra identificar que apenas as tag <li> contidas na <div> de id menu_flutuante serão afetadas por esse comando, portanto outras listas continuarão com o visual normal.

float:left, faz com que o elemento posicione-se à esquerda do último elemento se possível, e se não for ele pula linha para se posicionar...

list-style:none, faz com que as bolinhas da lista sumam...

line-height:80px, define o tamanho de cada linha, isso faz com que o conteúdo fique centralizado.

:hover, diz respeito a aparência que o objeto deve ter quando o mouse estiver sobre ele.

Acho que o resto não precisa explicação, é sobre formatação de textos, cores, etc.

Espero ter ajudado, podem pegar o exemplo à vontade e modificar!^^

Clique aqui para ver funcionando...