Submenús de encabezado

[Discourse]

	Resumen	Los Submenús del Encabezado te permitirán crear un menú de encabezado con submenús utilizando texto plano.
	Vista previa	Vista previa en Discourse Theme Creator
	Enlace al repositorio	https://github.com/discourse/discourse-header-submenus
	¿Nuevo en Temas de Discourse?	Guía para principiantes sobre el uso de Temas de Discourse

Instalar este componente del tema

Dado que este es un #componente_oficial del tema mantenido por el equipo de Discourse, las solicitudes de #soporte, bug, ux y #funcionalidad pueden realizarse en las categorías correspondientes aquí en Meta, etiquetadas con la etiqueta del componente del tema adecuada. Haz clic en un enlace a continuación para iniciar uno.

 Soporte  Error  UX  Funcionalidad

Funcionalidades

Escritorio

Móvil

Configuración

Nombre	Descripción
Elementos del menú	Agregar elementos del menú. Un elemento por línea en este orden: Texto, icono, título, vista.
Elementos del submenú	Agregar elementos del submenú. Un elemento por línea en este orden: Padre, texto, icono, URL, destino, título.
Iconos SVG	Incluir clases de iconos de FontAwesome para cada icono utilizado en las listas anteriores.
Modo fijo	Forzar que el menú sea visible en la parte superior de la pantalla independientemente de la posición del desplazamiento - Solo escritorio
Mostrar caret	Mostrar iconos de caret junto a los elementos del menú
Invertir posición	Mostrar los elementos del menú en el lado opuesto de la pantalla
Fondo del menú	Color de fondo para el menú. (hex, rgb, rgba o nombre de color CSS)
Color del elemento del menú	Color para los elementos del menú. (hex, rgb, rgba o nombre de color CSS)
Fondo-activo-del-elemento-del-menú	Color de fondo para los elementos del menú cuando están activos. (hex, rgb, rgba o nombre de color CSS)
Color-activo-del-elemento-del-menú	Color para los elementos del menú cuando están activos. (hex, rgb, rgba o nombre de color CSS)
Fondo del submenú	Color de fondo para los submenús. (hex, rgb, rgba o nombre de color CSS)
Color del elemento del submenú	Color para los elementos del submenú. (hex, rgb, rgba o nombre de color CSS)
Fondo al pasar el cursor sobre el elemento del submenú	Color de fondo para los elementos del submenú al pasar el cursor. (hex, rgb, rgba o nombre de color CSS)
Color al pasar el cursor sobre el elemento del submenú	Color para los elementos del submenú al pasar el cursor. (hex, rgb, rgba o nombre de color CSS)
Color del divisor	Color para las líneas divisorias en los submenús. (hex, rgb, rgba o nombre de color CSS)

Hay cuatro grupos de configuraciones

1. Elementos del menú

   Ingresa los elementos que deseas que aparezcan en el menú. Un elemento separado por comas por línea en este orden

   Texto, icono, título, vista

   Texto: lo que aparece en el menú.
   Icono: el icono que se muestra junto al elemento. Si no deseas usar un icono, usa none.
   Título: el texto que aparece cuando se pasa el cursor sobre el elemento.
   Vista: elige en qué dispositivos aparece el elemento.

   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdm aparece tanto en escritorio como en móvil
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vdo aparece solo en escritorios,
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vmo aparece solo en móviles.

   Debido a la falta de espacio, no se recomienda agregar más de 3-4 elementos en móvil.

2. Elementos del submenú

   Ingresa una lista de los elementos del submenú que deseas agregar a tu menú. Un elemento separado por comas por línea en este orden

   Padre, texto, icono, URL, destino, título

   Padre: el nombre del elemento del menú padre bajo el cual debe mostrarse este elemento del submenú. Usa el valor texto de la lista anterior.
   Texto: el texto que se muestra para este elemento del submenú.
   Icono: el icono para este elemento del submenú, usa none si no se necesita un icono.
   URL: la ruta a la que enlaza este elemento del menú. También puedes usar rutas relativas.
   Destino: elige si este elemento se abrirá en una nueva pestaña o en la misma. Usa blank para abrir el enlace en una nueva pestaña, o usa self para abrirlo en la misma pestaña.
   Título: el texto que se muestra cuando se pasa el cursor sobre el elemento.
   Divisores: También puedes agregar divisores entre los elementos del submenú. Para agregar un divisor usa padre, divider.

Aquí tienes un ejemplo rápido para cubrir los puntos 1 y 2 anteriores:

Digamos que quiero agregar un elemento del menú llamado Diseño y agregar algunos elementos a su submenú de la siguiente manera

Primero ingresaría esto como un menu_item

Diseño, magic, ¡Inspírate!, vdm

Y luego ingresaría estos como elementos sub_menu

Diseño, Galerías, th, #, blank, Geniales galerías para ti.
Diseño, Proceso de diseño, lightbulb-o, #, blank, Aprende lo básico.
Diseño, Diseño de blogs, columns, #, blank, ¿Qué hace que un blog sea genial?
Diseño, divider
Diseño, Regalos gratuitos, gift, #, blank, ¡A todos nos gustan los regalos gratuitos!
Diseño, Tutoriales de Photoshop, book, #, blank, Photoshop para principiantes.
Diseño, Tendencias de diseño, bar-chart, #, blank, ¡Mantente al día con las tendencias actuales!

¡Eso es todo!

El tema viene con un menú de marcador de posición por defecto, así que échale un vistazo y pregunta si tienes dudas.

3. Opciones de diseño.

   estas son bastante autoexplicativas

   

4. Opciones de color

   Estas están vacías por defecto, pero si agregas un color aquí, anulará los valores predeterminados del componente que se basan en el esquema de color actual.

¿Alojado por nosotros? Los componentes de temas están disponibles para usar en nuestros planes Estándar, Empresarial y Enterprise.