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:

 

É 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:

 

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:

 

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!

Poderá também gostar de:


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, Saúde, Sistemas, utilitários e outros temas relacionados com informática.

More Posts - Website - Twitter - Pinterest - Google Plus

  •  
  •  
  •  
  • 1
  •  
  •  
  •