Columnas

Desplegable multicolumna con secciones de enlaces agrupados

_mega_menu.html.erb

███ ███████ ████████████████ █████████ ███ ███████████ ██████ ██████████ ██

████ ███████████████████████████ ███████████████ ██████████████
  ███ ███████ ██████ ██
  ███████
    █████████████
    ███████████████████████████████
    ████████████████████████████████████████ ███████████████████████████ ████████████████████████
    ██████████████████ ████████████ ███████ ██████████ ████ ████ ███████ ███████████ ██████████████ ██████████████████ ██████████████████ ████████████████████ ████████████████████████████ ███████████████████████████ █████████████████ ████████████ ██████████████ ███████████████████ ███████████████████████ ██████████████████████████████████
  █

Get Access to View Code

mega_menu_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ██████████

  █████████ █
    █████████ █ █████
    █████████████████ █ ████
    ███████████████████ █ █████████████████████████
  █

Get Access to View Code

mega_menu_columns_component.html.erb

████ ███████████████████████████ ███████████████ ██████████████
  ███████
    █████████████
    ███████████████████████████████
    ████████████████████████████████████████ ███████████████████████████ ████████████████████████
    ██████████ ███████████████ ███
  █
    ███ █████████████ ██
    ███ ████████████ ██
  █████████

Get Access to View Code

mega_menu_columns_component.rb

█ ██████████████████████ ████

█████ ████████████████████████ █ ███████████████████
  ███████████ ███████████████ ██████████ ███████████

  ███ ██████████████████████████ █████████ ███ ███████████ ██████
    ██████████████ █ █████████████
    █████████ █ ████████
    ███████████ █ ██████████
  ███

Get Access to View Code

mega_menu_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ██████████

  █████████ █
    █████████ █ █████
    █████████████████ █ ████
    ███████████████████ █ █████████████████████████
  █

Get Access to View Code

Opciones

Nombre	Tipo	Predeterminado	Descripción
`trigger_label` *	String	requerido	Text label for the trigger button
`sections`	Array		Array of section hashes with :title (String) and :items (Array of {:label, :href, :description, :icon})
`full_width`	Boolean	`false`	Whether the panel spans full width of its container

Nombre	Tipo	Predeterminado	Descripción
`trigger_label` *	String	requerido	Text label for the trigger button
`sections`	Array		Array of section hashes with :title and :items
`full_width`	Boolean	`false`	Whether the panel spans full width of its container

Destacado

Desplegable multicolumna con un área de contenido destacado junto a los enlaces

_mega_menu.html.erb

███ ███████ ████████████████ █████████ ███ ███████████ ██████ ███████████████ ████ █████████████████████ ████ ███████████████ ████ ██████████████ ████ ██████████ ██

████ ███████████████████████████ ███████████████ ██████████████
  ███ ███████ ██████ ██
  ███████
    █████████████
    ███████████████████████████████
    ████████████████████████████████████████ ███████████████████████████ ████████████████████████
    ██████████████████ ████████████ ███████ ██████████ ████ ████ ███████ ███████████ ██████████████ ██████████████████ ██████████████████ ████████████████████ ████████████████████████████ ███████████████████████████ █████████████████ ████████████ ██████████████ ███████████████████ ███████████████████████ ██████████████████████████████████
  █

Get Access to View Code

mega_menu_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ██████████

  █████████ █
    █████████ █ █████
    █████████████████ █ ████
    ███████████████████ █ █████████████████████████
  █

Get Access to View Code

mega_menu_featured_component.rb

█ ██████████████████████ ████

█████ █████████████████████████ █ ███████████████████
  ███████████ ███████████████ ██████████ ████████████
              ████████████████ ██████████████████████ ████████████████ ██████████████

  ███ ██████████████████████████ █████████ ███ ███████████ ██████ ███████████████ ████ █████████████████████ ████ ███████████████ ████ ██████████████ ████
    ██████████████ █ █████████████
    █████████ █ ████████
    ███████████ █ ██████████

Get Access to View Code

mega_menu_featured_component.html.erb

████ ███████████████████████████ ███████████████ ██████████████
  ███████
    █████████████
    ███████████████████████████████
    ████████████████████████████████████████ ███████████████████████████ ████████████████████████
    ██████████ ███████████████ ███
  █
    ███ █████████████ ██
    ███ ████████████ ██
  █████████

Get Access to View Code

mega_menu_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ██████████

  █████████ █
    █████████ █ █████
    █████████████████ █ ████
    ███████████████████ █ █████████████████████████
  █

Get Access to View Code

Opciones

Nombre	Tipo	Predeterminado	Descripción
`trigger_label` *	String	requerido	Text label for the trigger button
`sections`	Array		Array of section hashes with :title and :items
`full_width`	Boolean	`false`	Whether the panel spans full width of its container
`featured_title`	String		Title for the featured content area
`featured_description`	String		Description text for the featured area
`featured_image`	String		Image URL for the featured area
`featured_href`	String		Link URL for the featured content

Nombre	Tipo	Predeterminado	Descripción
`trigger_label` *	String	requerido	Text label for the trigger button
`sections`	Array		Array of section hashes with :title and :items
`full_width`	Boolean	`false`	Whether the panel spans full width of its container
`featured_title`	String		Title for the featured content area
`featured_description`	String		Description text for the featured area
`featured_image`	String		Image URL for the featured area
`featured_href`	String		Link URL for the featured content

Registro de Cambios v1.0.0

- v1.0.0: Initial release with columns and featured styles
- Hover-intent with 200ms delay
- Mobile click toggle support
- Escape key to close

Mega menú

Columnas

Opciones

Destacado

Opciones

Registro de Cambios v1.0.0

Obtener Acceso Completo