Menu suspenso CSS / HTML puro

  1. Menu suspenso CSS / HTML puro Neste tutorial vamos fazer um menu horizontal clássico em CSS puro....
  2. Animamos o menu horizontal enquanto apontamos.
  3. Descrever o menu suspenso CSS / HTML

Menu suspenso CSS / HTML puro

Neste tutorial vamos fazer um menu horizontal clássico em CSS puro. Tem ícones nas listas. Ao apontar para um item, ele suavemente altera a cor do botão e o texto, uma sombra é adicionada. Listas suspensas podem ser feitas em vários níveis e a principal coisa é simplesmente implementada em CSS3 puro.

A continuação desta lição aqui - parte 2 VERSÃO MÓVEL menu horizontal ".

Veja a caneta POyzbW de Denis ( @Dwstroy ) em Codepen .

Na lição use:

  • exibição: flex;
  • usar transição;
  • posicione os elementos com posição.

Estrutura de menu horizontal em HTML

Primeiro, escreva a marcação abaixo do menu horizontal. Nós abrimos nosso ambiente de desenvolvimento no meu caso, isto é PhpStorm, crie um arquivo index.html, prescreva o frame html: 5, substitua lang por ru.

Todos meta será excluído, exceto para a codificação, vou registrar meu título " Menu Tom ".

Entre o corpo nós escrevemos a tag de cabeçalho, e nela há um bloco com a classe .dws-menu que conterá nosso menu. Em seguida, a estrutura será a seguinte, vamos criar listas no valor de cinco peças. Em cada lista, haverá um link com o atributo href = "#". Então eu vou para o ícone com a classe .fa .fa-

<header> <classe de navegação = "menu do dws"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>

Nós pressionamos para aplicar.

Vamos anotar o nome dos itens do menu ( Home, Produtos, Serviços, Notícias, Contatos ).

Em seguida, selecione e conecte os ícones. Ir para o site, vamos selecionar os ícones para estes itens de menu:

<i class = "fa fa- home "> </ i> <i class = "fa fa- carrinho de compras "> </ i> <i class = "fa facogs"> </ i> <i class = "fa -th-list "> </ i> <i class = "fa - fa -envelope-aberto "> </ i>

<i class = fa fa- home > </ i> <i class = fa fa- carrinho de compras > </ i> <i class = fa facogs> </ i> <i class = fa -th-list > </ i> <i class = fa - fa -envelope-aberto > </ i>

Baixe o arquivo do site com ícones, extraia seu conteúdo para o seu computador, copie a pasta de fontes e a pasta css para o seu ambiente de desenvolvimento.

A pasta de fontes contém fontes de ícones e a pasta css contém seus estilos. Estilos compactados podem ser removidos font-awesome.min, nós conectamos a fonte descompactada-awesome.css.

Em index.html, conectamos ícones e registramos cada item com seu próprio estilo de ícone ( home , carrinho de compras , cogs , th-list , envelope-open ).

Fizemos o quadro principal, criamos um submenu após a descrição do estilo principal, e agora vamos criar um arquivo onde descreveremos os estilos principais do menu horizontal style.css e conectá-lo ao index.html. Para verificar se os estilos estão conectados, crie uma pasta img, nela colocarei uma imagem arbitrária no fundo. Vamos escrever a conexão da imagem usando fundo.

body {background-image: url ("../ img / ep_naturalwhite.png"); }

Como podemos ver, tudo foi exibido e, em seguida, procederemos à descrição dos estilos.

Primeiro de tudo, vamos redefinir todos os recuos, que diferentes navegadores podem definir por padrão:

.dws-menu * {margin: 0; preenchimento: 0; }

Defina o cabeçalho para 200 picos. e designar qual você pode baixar e conectar-se separadamente no site, para o caso de escrever fontes adicionais.

cabeçalho {margin: 200px; família-fonte: Cuprum, Arial, Helvetica, sans-serif; }

Esconda os marcadores nas listas:

.dws-menu ul, .dws-menu ol {estilo lista: nenhum; }

As listas serão exibidas horizontalmente com display: flax, e faremos no centro:

.dws-menu> ul {display: flex; justificar-conteúdo: centro; }

No cabeçalho recuaremos apenas o topo, escreveremos um top de margem.

cabeçalho { margin-top: 200px; família-fonte: Cuprum, Arial, Helvetica, sans-serif; }

Vamos projetar nosso menu, definir a cor dos botões, a fonte, etc.

Selecione links nav> ul li e torne-os elementos de bloco. Defina o fundo do menu, escreva recuos, especifique o tamanho, cor, remova o sublinhado e faça os títulos em letras maiúsculas.

.dws-menu> ul li a {display: bloco; fundo: #ececed; preenchimento: 15px 30px 15px 40px; tamanho da fonte: 14px; cor: # 454547; text-decoration: nenhum; text-transform: maiúscula; }

Posicione então os ícones, atribua as listas à posição: relativo; para maior alinhamento de ícones:

.dws-menu> ul li {posição: relativa; }

Em seguida, selecionamos ícones, posicioná-los absolutamente, fazer o recuo de cima a 15 picos, dos 12 picos esquerdos, aumentar o tamanho para 18 picos.

.dws-menu> ul li> a i.fa {posição: absoluta; top: 15px; esquerda: 12px; tamanho da fonte: 18px; }

Atribua o separador na forma de uma borda às listas, selecione o primeiro elemento LI, defina a borda. Selecionamos o último elemento LI e atribuímos a ele uma borda semelhante.

.dws-menu> ul li: primeiro filho {borda esquerda: 1px sólido # b2b3b5; } .dws-menu> ul li: último filho {border-right: 1px solid #babbbd; }

Fazendo delimitadores para listas de LI:

.dws-menu> ul li {posição: relativa; borda direita: 1px sólido # c7c8ca; }

O menu adquiriu a aparência, então você pode prosseguir para a descrição dos estilos durante o foco.

Animamos o menu horizontal enquanto apontamos.

Selecione links e atribua uma cor ao bloco e atribua a cor do próprio link ao ícone para branco. Vamos adicionar outra sombra escura. Com a ajuda da transição em 0,3 segundos, faremos uma aparência suave:

.dws-menu li a: hover {fundo: # 454547; cor: #ffffff; box-shadow: 1px 5px 10px -5px preto; transição: todos os 0,3s de facilidade; }

E para que esse efeito desapareça suavemente, adicione esse estilo ao link à vontade:

.dws-menu> ul li a {display: bloco; fundo: #ececed; preenchimento: 15px 30px 15px 40px; tamanho da fonte: 14px; cor: # 454547; text-decoration: nenhum; text-transform: maiúscula; transição: todos os 0,3s de facilidade; }

O menu principal está concluído e você pode prosseguir para a descrição do submenu e dos submenus embutidos neles.

Descrever o menu suspenso CSS / HTML

Sobre nós abrimos index.html e adicionamos, por exemplo, um menu adicional aos produtos. Insira o UL entre as listas de LI e coloque cinco listas nele, que conterão links com o atributo herf = ”#”.

ul> li * 5> a [href = "#"]

Pressionamos para aplicar, escreva o nome dos itens ( Roupas, Eletrônicos, Alimentos, Ferramentas, Vida. Química ).

<ul> <li> <a href="#"> Roupas </a> </ li> <li> <a href="#"> Eletrônicos </a> </ li> <li> <a href = "#"> Comida </a> </ li> <li> <a href="#"> Ferramentas </a> </ li> <li> <a href="#"> Vida. química </a> </ li> </ ul>

Em seguida, abra style.css e descreva os estilos de submenu.

Selecionamos a segunda lista e atribuímos a posição: absolute; , vamos definir a largura mínima para 150 picos.

/ * submenu * / .dws-menu li ul {posição: absoluto; min-width: 150px; }

Vamos escrever para as listas de fronteira em 1 pico.

.dws-menu li> ul li {limite: 1px sólido # c7c8ca; }

Para os links no submenu, vamos definir recuos em 10 picos. Remova a transformação de texto e torne o fundo um par de tons mais escuros: # e4e4e5; .

.dws-menu li> ul li a {preenchimento: 10 px; text-transform: nenhum; fundo: # e4e4e5; }

Em seguida, crie outro submenu. Vá para o arquivo de marcação e, por exemplo, no formulário "Eletrônicos" pelo menu de analogia, como fizemos antes. Descrevemos os títulos dos itens ( Câmeras, Computadores, Telefones ) e salve.

<li> <a href="#"> Eletrônica </a> <ul> <li> <a href="#"> Câmeras </a> </ li> <li> <a href="#"> Computadores </a> </ li> <li> <a href="#"> Telefones </a> </ li> </ ul> </ li>

Eles foram trazidos, mas escondidos sob o menu principal, agora posição: absoluta; aninhado UL e mova-o para o pico de 150. ao lado:

.dws-menu li> ul li ul {posição: absoluto; direita: -150px; top: 0; }

Em seguida, faremos o submenu aparecer ao segmentar os principais itens do menu superior, para isso adicionamos display: none; e, assim, ocultar todos os pontos internos.

/ * submenu * / .dws-menu li ul {posição: absoluto; min-width: 150px; exibir: nenhum; }

E para a sua aparência, vamos selecionar as listas em foco e exibi-las com a ajuda de display: block; .

.dws-menu li: hover> ul {display: bloco; }

Agora você pode adicionar menus de vários níveis simplesmente copiando o bloco UL, alterando seus itens.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Página inicial </a> </ li> <li> <a href="#"> < i class = "fa-fa-shopping-cart"> </ i> Produtos </a> <ul> <li> <a href="#"> Roupas </a> <ul> <li> <a href = "#"> Calçados </a> </ li> <li> <a href="#"> Casacos </a> </ li> <li> <a href="#"> Calças </a> < / li> </ ul> </ li> <li> <a href="#"> Eletrônica </a> <ul> <li> <a href="#"> Câmeras </a> </ li> <li> <a href="#"> Computadores </a> </ li> <li> <a href="#"> Telefones </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Comida </a> </ li> <li> <a href="#"> Ferramentas </ h a> </ li> <li> <a href="#"> química </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Serviços </a> <ul > <li> <a href="#"> Serviço 1 </a> </ li> <li> <a href="#"> Serviço 2 </a> </ li> <li> <a href = "#"> Serviço 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Notícias </a> </ li> <li> <a href="#"> <i class = "fa-fa-envelope-aberto"> </ i> Contatos </a> </ li> </ ul>

Então vamos terminar os botões com os botões. Eu uso, eu criei vários Presets, você pode criar o seu próprio, no meu caso, eu apenas copiei este código e coloquei no lugar de fundo que eu escrevi antes.

.dws-menu> ul li a {display: bloco; / * Permalink - este gradiente: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Navegadores antigos * / background: -moz-linear-gradient (superior, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / background: -webkit-linear-gradiente (superior, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: gradiente linear (para baixo, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; tamanho da fonte: 14px; cor: # 454547; text-decoration: nenhum; text-transform: maiúscula; transição: todos os 0,3s de facilidade; } .dws-menu li a: hover {/ * Permalink - este gradiente: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; / * Navegadores antigos * / background: -moz-linear-gradient (superior, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / background: -webkit-linear-gradiente (superior, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / background: gradiente linear (para baixo, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtro: progid: DXImageTransform Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; box-shadow: 1px 5px 10px -5px preto; transição: todos os 0,3s de facilidade; } dws-menu> ul li a {display: bloco;  / * Permalink - este gradiente: http://colorzilla

Se desejar, este menu pode ser projetado para o estilo que lhe formos adequado no site, basta gerar uma cor e substituí-lo no código. Aconteceu um menu horizontal simples e ao mesmo tempo agradável, feito em CSS puro.

Deixe um comentário: