Como criar um menu de fly-out com CSS

Os menus de fly-out ou suspensos mostram a hierarquia de páginas do site. Erradica a necessidade de os usuários carregarem várias páginas. O menu de fly-out é utilizado para exibir o contexto ou soltar o menu quando o usuário solicitar. Também é referido como um submenu. Esses menus são expandidos para o mouse pairar. O menu Fly-Out pode ser construído sem usar JavaScript.

Esta postagem explicará o procedimento para criar um menu de mosca com CSS.

Como criar um menu de fly-out com CSS?

No HTML, adicione os seguintes elementos para criar um menu de mosca:

• • O "
    ”O elemento é implementado com o“Menu-mosca" aula. Dentro deste elemento, adicione o “
    • ”Elemento para incluir os menus.
    • O "
    • ”Os elementos mantêm o URL de origem e os nomes das páginas que exibem como menus.
    • O URL definiu no atributo “Href"Do html"" elemento:

  
  
  • Lar
  
  
  • Sobre
    
    
    
    • Faculdade
    
    
    • Funcionários
    
    
    • Gerenciamento
    
    
    
    
  
  
  • Admissões
    
    
    
    • Critério
    
    
    • Testes de amostra
    
    
    
    
  
  
  • Acadêmicos
  
  
  • Eventos
    
    
    
    • Distribuição de prêmios
    
    
    • Competições
    
    
    • Dia do meio ambiente
    
    
    
    
  
  
  • Contato
  
  

  
  A estrutura do menu Fly-Out foi criada com sucesso usando os elementos HTML:

  
  Agora, aplique as propriedades CSS para estilizar elementos html.

  Etapa 1: Classe de estilo “mosca-mosca”

  .Menu-mosca
  margem: 15px;
  Largura: 150px;
  Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;
  

  
  O "Menu-mosca”Classe do“

  ”O elemento é especificado com estas propriedades:
  • • ““margem”Dá espaço em todos os lados do elemento.
    • ““largura”Determina a largura do elemento.
    • ““família de fontes”A propriedade atribui o estilo de fonte do elemento. A lista de fontes mencionadas garante que, se o primeiro estilo não for suportado pelo navegador, o outro será aplicado automaticamente.

  Saída

  
  Etapa 2: Elemento de estilo “LI”

  .Menu-mosca li
  Posição: relativa;
  exibição: bloco;
  

  
  O elemento filho “

  • " do "
    ”Tag tendo aula“Menu-mosca”Está estilizado com as seguintes propriedades:
    • • ““posição”Propriedade com o valor“relativo”Ajusta o parente da posição do elemento.
      • ““mostrar”Propriedade com o valor“bloquear”Pega toda a largura e começa em uma nova linha.

    Etapa 3: Estilo "Li" e "UL" elementos

    .mosca-menu li ul
    Posição: Absoluto;
    largura: 100%;
    Mostrar nenhum;
    

    
    O "

    ”Elemento dentro do“
    • ”Tag do“Menu-mosca”A classe é aplicada com estas propriedades:
      • • ““posição" com o "absoluto”O valor define a posição do elemento em relação ao elemento pai posicionado.
        • O "largura" e "mostrarAs propriedades são explicadas acima.

      Saída

      
      Etapa 4: Elemento de estilo “A”

      .Menu de mosca a
      exibição: bloco;
      largura: 100%;
      margem: 5px;
      preenchimento: 10px;
      cor preta;
      borda: 1px RGB sólido (245, 244, 244);
      Shadow de caixa: 2px 2px CadetBlue;
      Radio de fronteira: 8px;
      transição: tudo 0.3s facilitar;
      Decoração de texto: Nenhum;
      

      
      O "”Elemento da classe“Menu-mosca”É atribuído as seguintes propriedades:

      • • O texto dentro do “”Tag é por padrão azul, adicione o“corPropriedade para nomear a cor do texto.
        • O "fronteira”A propriedade é aplicada para envolver os elementos em uma borda.
        • ““Sombra da caixa”É uma propriedade abreviada para adicionar sombra, que mantém os valores para deslocamento horizontal, deslocamento vertical, efeito desfoque e cor.
        • O "Radio de fronteira”Propriedade faz os cantos do elemento redondos.
        • ““transição”Propriedade define a velocidade da animação do elemento durante um determinado período de tempo.
        • ““decoração de texto”Propriedade com a“nenhum”O valor remove a decoração de texto sublinhada.

      Saída

      
      Vamos adicionar alguns efeitos de pairar ao menu Fly-Out.

      Etapa 5: estilo "A" elemento em "Passe"

      .Menu-mosca A: Passe o passe
      Background-Color: #009;
      Cor: #FFF;
      

      
      O ":flutuar”A pseudo-classe é utilizada para aplicar o estilo quando o mouse paira no elemento. Essas propriedades de estilo são explicadas abaixo:

      • • ““cor”Declare a cor do texto do elemento.
        • O "cor de fundo”É implementado para alterar a cor do fundo.

      Saída

      
      Etapa 6: estilo "LI" elemento em "Passe"

      .Menu-mosca Li: Hover Ul
      exibição: bloco;
      Transform: tradutor (175px, -45px);
      

      
      O "

    • ”O elemento no hover exibirá seu filho“
      ”Elementos com as seguintes propriedades:
      • • ““mostrar" com o "bloquear”O valor corrige a exibição do“
          ”Elemento no bloco. Isso significa que o elemento aceitará toda a largura.
          • ““transformar”Propriedade com a“traduzir()”O valor da função estabelece o efeito de animação no elemento. A função "tradução ()" contém dois parâmetros para o "eixo x" e "eixo y”Respectivamente.
          • Em pairar, o “
            ”O elemento será exibido como um bloco no“eixo x" e "eixo y”Espaços.

          Saída

          
          Dessa forma, podemos criar com eficiência um menu de mosca para o nosso aplicativo.

          Conclusão

          Para criar um menu de fly-out com CSS, o “

          " e "
          • ”Os elementos do HTML podem ser implementados para criar a estrutura de fly-out. O CSS “mostrar" e "transformar”Propriedades, juntamente com muitas outras propriedades úteis, são usadas para formulá -las ou projetá -las. Este post forneceu um procedimento abrangente para criar um menu de mosca usando CSS.