Cómo crear un menú de vuelo con CSS

Los menús Fly-Out o desplegables muestran la jerarquía de páginas del sitio web. Erradica la necesidad de que los usuarios carguen varias páginas. Se utiliza el menú volador para mostrar el contexto o el menú de soltar cuando el usuario lo solicite. También se conoce como un submenú. Estos menús se expanden en ratones ratones. El menú de vuelo se puede construir sin usar JavaScript.

Esta publicación explicará el procedimiento para crear un menú de vuelo con CSS.

Cómo crear un menú de vuelo con CSS?

En HTML, agregue los siguientes elementos para crear un menú de vuelo:

• • El "
    "El elemento se implementa con el"mosca" clase. Dentro de este elemento, agregue el "
    • "Elemento incluye los menús.
    • El "
    • Los elementos contienen la URL de origen y los nombres de las páginas que se muestran como menús.
    • La URL se ha definido en el atributo "href"Del HTML"" elemento:

  
  
  • Hogar
  
  
  • Acerca de
    
    
    
    • Facultad
    
    
    • Personal
    
    
    • Gestión
    
    
    
    
  
  
  • Admisiones
    
    
    
    • Criterios
    
    
    • Pruebas de muestra
    
    
    
    
  
  
  • Académica
  
  
  • Eventos
    
    
    
    • Distribución de premios
    
    
    • Concursos
    
    
    • Día del Medio Ambiente
    
    
    
    
  
  
  • Contacto
  
  

  
  La estructura del menú de vuelo se ha creado con éxito utilizando los elementos HTML:

  
  Ahora, aplique las propiedades de CSS a los elementos HTML de estilo.

  Paso 1: Clase de estilo "Fly-Menu"

  .mosca-menú
  margen: 15px;
  Ancho: 150px;
  Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;
  

  
  El "mosca"Clase de la"

  El elemento se especifica con estas propiedades:
  • • "margen"Da espacio a cada lado del elemento.
    • "ancho"Determina el ancho del elemento.
    • "Familia tipográfica"La propiedad asigna el estilo de fuente del elemento. La lista de fuentes mencionadas asegura que si el primer estilo no es compatible con el navegador, la otra se aplicará automáticamente.

  Producción

  
  Paso 2: Elemento de estilo "Li"

  .Fly-Menu Li
  Posición: relativo;
  bloqueo de pantalla;
  

  
  El elemento infantil "

  • " del "
    "Etiqueta que tiene clase"mosca"Tiene el estilo con las siguientes propiedades:
    • • "posición"Propiedad con el valor"relativo"Ajusta la posición de la posición del elemento.
      • "mostrar"Propiedad con el valor"bloquear"Toma todo el ancho y comienza desde una nueva línea.

    Paso 3: Elementos de estilo "Li" y "UL"

    .Fly-Menu Li ul
    Posición: Absoluto;
    Ancho: 100%;
    Pantalla: ninguno;
    

    
    El "

    "Elemento dentro del"
    • "Etiqueta del"moscaLa clase se aplica con estas propiedades:
      • • "posición" con el "absoluto"El valor establece la posición del elemento en relación con el elemento principal posicionado.
        • El "ancho" y "mostrar"Las propiedades se explican arriba.

      Producción

      
      Paso 4: Elemento de estilo "A"

      .mosca-menú a
      bloqueo de pantalla;
      Ancho: 100%;
      margen: 5px;
      relleno: 10px;
      de color negro;
      borde: 1px sólido RGB (245, 244, 244);
      Shadow de caja: 2px 2px CadetBlue;
      Border-Radius: 8px;
      Transición: todos 0.3s facilidad;
      Decoración de texto: ninguna;
      

      
      El ""Elemento de la clase"mosca"Se le asigna las siguientes propiedades:

      • • El texto dentro del ""La etiqueta es de forma predeterminada azul, agregue el"color"Propiedad para nombrar el color del texto.
        • El "bordeLa propiedad se aplica para encerrar los elementos en un borde.
        • "sombra de la caja"Es una propiedad abreviada para agregar sombra, que contiene los valores para desplazamiento horizontal, desplazamiento vertical, efecto desenfoque y color.
        • El "radio fronterizo"La propiedad hace que las esquinas del elemento reduzcan.
        • "transición"La propiedad define la velocidad de la animación del elemento durante un período de tiempo determinado.
        • "decoración de texto"Propiedad con el"ninguno"El valor elimina la decoración subrayada del texto.

      Producción

      
      Agreguemos algunos efectos de desplazamiento al menú de vuelo.

      Paso 5: Elemento de estilo "A" en "Hover"

      .Fly-Menu A: Hover
      Color de fondo: #009;
      Color: #fff;
      

      
      El ":flotarSe utiliza la pseudo-clase para aplicar el estilo cuando el mouse se cierne en el elemento. Estas propiedades de estilo se explican a continuación:

      • • "color"Indique el color del texto del elemento.
        • El "color de fondo"Se implementa para cambiar el color de fondo.

      Producción

      
      Paso 6: Elemento de estilo "Li" en "Hover"

      .Fly-Menu Li: Hover ul
      bloqueo de pantalla;
      transformar: traducir (175px, -45px);
      

      
      El "

    • "El elemento en Hover mostrará a su hijo"
      "Elementos con las siguientes propiedades:
      • • "mostrar" con el "bloquear"Valor arregla la visualización del"
          "Elemento en el bloque. Significa que el elemento ocupará todo el ancho.
          • "transformar"Propiedad con el"traducir()"El valor de la función establece el efecto de animación en el elemento. La función "traducir ()" contiene dos parámetros para el "eje x" y "eje y"Respectivamente.
          • En el flotador, el "
            El elemento "se mostrará como un bloque en el"eje x" y "eje y"Espacios.

          Producción

          
          De esta manera, podemos crear eficientemente un menú de vuelo para nuestra aplicación.

          Conclusión

          Para crear un menú de vuelo con CSS, el "

          " y "
          • Se pueden implementar elementos de HTML para crear la estructura de vuelo. El CSS "mostrar" y "transformar"Las propiedades junto con muchas otras propiedades útiles se utilizan para formularlo o diseñarlo. Esta publicación ha proporcionado un procedimiento integral para crear un menú de vuelo utilizando CSS.