Barra horizontal com efeito de foco em html5, css3 e bootstrap

Que necessitamos?

Um servidor local (já disse que uso o Xampp)
·
UMA editor de código (use o texto sublime 3)

Passo 1

Vou começar indo ao diretório do meu servidor local e criando uma nova pasta para armazenar este projeto, vou chamá-la de "menu_hover" dentro dela e adicionar outra para conter os arquivos css.

PROLONGAR

PROLONGAR

Passo 2

Agora, em nosso editor de código, começaremos adicionando uma nova estrutura html5 à qual adicionarei as folhas de estilo correspondentes ao bootstrap de seus endereços CDN para não ocupar espaço em nosso servidor, também adicionarei uma folha de estilo, chamada "estilo .css "que será armazenado em nossa pasta" css "criada anteriormente …
Posteriormente, salvaremos esse arquivo como "menu.html" na pasta "menu_hover" criada na etapa 1.

PROLONGAR

etapa 3

Agora adicionaremos um rótulo ao nosso "menu.html" e estabeleceremos como ele será exibido na tela definindo suas propriedades no arquivo style.css …

PROLONGAR

PROLONGAR

Como você verá no css, adicionei um "background-color: green" que é apenas para fins de orientação para ver o tamanho e a posição do cabeçalho na tela, você pode brincar com os tamanhos, fontes e outros de acordo com o seu preferências … sim, agora vemos isso em nosso navegador, teríamos algo assim …

PROLONGAR

Passo 4

Quero que meu menu seja composto de 4 links, para conseguir isso dentro do rótulo, adicionarei 4Com a classe "box_menu" para identificá-los, adicionarei a cada um um id crescente de "um" para "quatro".

PROLONGAR

Etapa 5

Em nosso arquivo style.css adicionaremos as propriedades para a classe "box_menu" e para as camadas "um, dois, três e quatro".

Etapa 6

Começaremos a definir o comportamento da classe "box_menu" estabelecendo uma posição relativa, lembrando que neste caso teremos 4 links e que a camada que os contém, ou seja, ocupará 80% da tela, portanto iremos precisamos deles para 4 elementos com a classe box_menu ocupando 100% do espaço disponível dentro dela, para isso vamos pegar 100% e dividir pelo número de links ou elementos que queremos colocar, pois neste caso são 4 então seria 100/4 = 25, portanto nossa classe "box_menu" deveria ter uma largura de 25%. Também daremos uma parada de 100% e diremos para ele flutuar para a esquerda para que os elementos sejam vistos lado a lado.

PROLONGAR

Etapa 7

Posteriormente definiremos a cor de fundo com a qual mostraremos cada um dos elementos, no passo 4 adicionaremos id de um a quatro agora em nosso css definiremos como ficará cada uma dessas camadas. para isso faremos o seguinte …

PROLONGAR

Isso nos dará o seguinte resultado:

PROLONGAR

Como você pode ver já delimitamos os espaços de cada elemento e sua cor de fundo, você pode usar os códigos de cores de acordo com seus gostos, neste caso porque não é um site com um tema específico, mas um teste que usei como uma demonstração …

Etapa 8

Bem, vamos voltar ao documento "menu.html" como o deixamos no passo 4, agora vamos prosseguir para adicionar os ícones e o texto que nosso menu terá. Para isso não vamos usar imagens, mas vamos para nos ajudarmos um pouco com o bootstrap e usaremos ícones do pacote “Font Awesome”, para isso vamos ao navegador e acessamos a web https: // fortawesome… .o / Font-Awesome / clique no botão “Começar ”E vá até a seção“ MAIS FÁCIL: BootstrapCDN por MaxCDN ”.

PROLONGAR

Vou copiar o link do CDN para a folha de estilo Font Awesome e colá-lo no cabeçalho do meu documento "menu.html"

PROLONGAR

Com isso podemos agora usar os ícones Font Awesome em nosso design, mas agora temos que escolher quais ícones vamos colocar, para isso voltamos ao site deles e localizamos o menu "Ícones".

PROLONGAR

Procuramos na extensa lista o ícone que nos interessa e clicamos nele.

PROLONGAR

Ao clicarmos, ele nos levará a outra janela na qual podemos ver o código para inserir aquele ícone em nosso design.

PROLONGAR

Simplesmente copiamos e vamos ao nosso "menu.html" e colamos noda seguinte maneira…

PROLONGAR

PROLONGAR

Também adicionaremos um nome abaixo dele que é centralizado …

PROLONGAR

Vamos verificar como fica em nosso navegador …

PROLONGAR

Vemos que já adicionamos um ícone e um texto centralizado, então repetimos esta etapa para os 3 elementos restantes.

PROLONGAR

Etapa 9

Os ícones são bem pequenos, vou aumentar seu tamanho 3 vezes, para isso vou adicionar uma classe "fa-3x".

PROLONGAR

PROLONGAR

Etapa 10

Agora vou modificar um pouco o arquivo css para completar o efeito, vou começar modificando a classe "box_menu" alinhando o texto ao centro e dando-lhe um display = "block";

PROLONGAR

Etapa 11

Posteriormente, escreverei uma classe para controlar a aparência dos ícones, na qual definirei que eles são exibidos em branco, que têm uma borda arredondada ao redor deles e que têm uma animação de transição …

PROLONGAR

Etapa 12

Em relação aos textos do rótulo

Vou colocá-los em branco e vou reduzir a opacidade um pouco, adicionando um leve efeito de animação para baixo também.

PROLONGAR

Etapa 13

Agora vou definir como nossos elementos se comportarão ao passar o mouse sobre ele e vou adicionar uma pequena animação a ele para suavizar o efeito.

PROLONGAR

Feito isso, podemos dizer que terminamos de projetar o efeito, agora só precisamos adicionar os links da maneira que você quiser, comento que esse efeito também pode ser usado para colocar imagens que tenham texto descritivo abaixo delas, como Por exemplo, um portfólio profissional, uma galeria ou um catálogo de produtos, tudo é deixado à sua imaginação …
Ao final Vou deixar um .zip com o código fonteSe gostou deste tutorial, deixe seu comentário, se houve algo que não ficou claro por favor me pergunte, se gostaria de um tutorial sobre um tópico específico, me avise …
Espero que seja útil para você, cumprimentos …

Arquivo com código fonte… Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo