Menu flutuante em CSS

May 17, 2011

Desta vez vou mostrar uma das muitas funcionalidades do CSS (Cascading Style Sheets). Com o CSS podemos definir a maneira como são mostrados os vários elementos HTML, quer seja em formato, dimensão, aparência ou funcionalidade.

Existem vários efeitos que podemos fazer usando CSS, mas um dos que é bastante útil é um menu flutuante. É de extrema utilidade em páginas muito extensas e onde queremos ter sempre o menu visível na página à medida que vamos fazendo scroll.

Este exemplo que vou mostrar é extremamente simples e fácil de moldar consoante o que se pretende.

Começamos pelo efeito que queremos no nosso menu, que é o nosso CSS com a classe floating-menu que será usada num div:

 CSS | 
 copiar código |
?
 
1
div.floating−menu {position:fixed;background:#fff4c8;border:1px solid #ffcc00;left:auto;width:150px;right:10px;}
2
div.floating−menu a, div.floating−menu h4 {display:block;margin:0 0.5em;}

É nestas duas linhas (principalmente a primeira) que podemos ajustar o menu consoante o que pretendemos. A única opção que não se pode alterar é a position que tem de ser sempre fixed, caso contrário o menu não acompanha o scroll da página.

As opções right e left servem para posicionar o menu à direita ou esquerda. Neste caso como a opção left está definida como auto o menu irá permanecer à direita a 10 pixels da margem direita right:10px. Se quiserem o menu à esquerda basta inverterem os valores destas duas opções.

Pode-se ainda definir a cor de fundo background, o tamanho tipo e cor da borda border e a largura do menu width, a altura será tanta quanto os itens/links que o menu tiver.

O passo seguinte será definir um div que use a classe CSS floating-menu, div esse que irá conter um título do menu e os diversos links:

 HTML | 
 copiar código |
?
 
1
<div class="floating-menu">
2
<h4>Menu</h4>
3
<a href="http://interessespessoais.com/programacaoweb/">Programação Web</a>
4
<a href="http://interessespessoais.com/programacaoweb/menu-flutuante-em-css">Menu Flutuante em CSS</a>
5
<a href="http://interessespessoais.com/">Interesses Pessoais</a>
6
</div>

Na primeira linha temos a abertura do div com a indicação que vai ser exibido de acordo com a classe floating-menu que vimos acima.

Como podem ver não podia ser mais simples que isto. Para usarem este menu flutuante basta incluírem o seguinte código completo deste exemplo na vossa página onde querem usar este menu:

 HTML | 
 copiar código |
?
 
01
<style>
02
div.floating&minus;menu {position:fixed;background:#fff4c8;border:1px solid #ffcc00;left:auto;width:150px;right:10px;}
03
div.floating&minus;menu a, div.floating&minus;menu h4 {display:block;margin:0 0.5em;}
04
</style>
05
<div class="floating&minus;menu">
06
<h4>Menu</h4>
07
<a href="http://interessespessoais.com/programacaoweb/">Programação Web</a>
08
<a href="http://interessespessoais.com/programacaoweb/menu&minus;flutuante&minus;em&minus;css">Menu Flutuante em CSS</a>
09
<a href="http://interessespessoais.com/">Interesses Pessoais</a>
10
</div>

Este menu já me foi útil em diversas ocasiões, espero que vos ajude também a dar mais funcionalidade aos vossos sites

Dúvidas e sugestões são sempre bem vindas, e partilhem com os amigos!

Tiago Ramalho

Tiago Ramalho é um profissional de Informática interessado em Internet, Programação .NET e PHP e blogging. Nos tempos livres escreve nos interessespessoais.com sobre Jardim, Sistemas, utilitários e outros temas relacionados com informática.

More Posts - Website - Facebook