Índice
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
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
PROLONGAR
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
PROLONGAR
PROLONGAR
PROLONGAR
PROLONGAR
PROLONGAR
PROLONGAR
PROLONGAR
PROLONGAR
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
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 …
