0

Menu de Navegação Redes Sociais com CSS

cssMenu de Navegação Redes Sociais com CSS

Nesta postagem segue um exemplo uma caixa de navegação de redes sociais usando CSS para adicionar as imagens das redes sociais aos links de cada rede social. O primeiro passo é a criação do bloco de navegação.

Criamos uma lista de redes sociais somente com os links. Isso ajuda pessoas com deficiência visual que fazem uso de plugin de leitura de páginas já que os mesmos não fazem a leitura da imagem. A inclusão das imagens deixamos a cargo do CSS.

Ai lá vai o estilo da navegação de redes sociais.

As estilização realizada pelo css é a seguinte: posicionamos o elemento com a classe .icones-sociais na parte inferior da página ao lado esquerdo, aos elementos “li” que estejam dentro dessa classe removemos o marcador de lista e colocamos todos em uma única linha, aos links removemos o seu texto usando o text-indent: -99999 que faz com que o mesmo não seja mostrado no DOM além de setamos a proporção da imagem e por fim adicionamos a respectivas imagens a cada classe. Ao fim teremos uma barra de navegação semelhante a barra apresentada abaixo.

social-icons

Créditos de Imagens: http://iconfinder.com

Paulo R. Marinho

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

+ 14 = 24