Submenús de encabezado

[Discourse]

	Resumen	Header Submenus te permitirá 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 los temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

Instala este componente del tema

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

 Soporte  Error  UX  Función

Funciones

Escritorio

Móvil

Configuración

Nombre	Descripción
Elementos del menú	Agrega elementos del menú. Un elemento por línea en este orden: Texto, icono, título, vista.
Elementos del submenú	Agrega elementos del submenú. Un elemento por línea en este orden: Padre, texto, icono, URL, destino, título.
Iconos SVG	Incluye clases de iconos de FontAwesome para cada icono utilizado en las listas anteriores.
Modo fijo	Fuerza que el menú sea visible en la parte superior de la pantalla independientemente de la posición del desplazamiento: solo escritorio.
Mostrar indicador	Muestra iconos de indicador junto a los elementos del menú.
Invertir posición	Muestra 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 del elemento del menú activo	Color de fondo para los elementos del menú cuando están activos. (hex, rgb, rgba o nombre de color CSS)
Color del elemento del menú activo	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 del elemento del submenú al pasar el cursor	Color de fondo para los elementos del submenú al pasar el cursor. (hex, rgb, rgba o nombre de color CSS)
Color del elemento del submenú al pasar el cursor	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 delimitado 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 escritorio,
   ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ ‏‏‎ vmo aparece solo en móviles.

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

2. Elementos del submenú

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

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

   Padre: el nombre del elemento del menú principal 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 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 pestaña. 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í hay un ejemplo rápido para cubrir los puntos 1 y 2 anteriores:

Digamos que quiero agregar un elemento de menú llamado Diseño y agregar algunos elementos a su submenú así

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, Hermosas galerías para que las veas.
Diseño, Proceso de diseño, lightbulb-o, #, blank, Aprende los conceptos básicos.
Diseño, Diseño de blogs, columns, #, blank, ¿Qué hace que un blog sea excelente?
Diseño, divider
Diseño, Regalos, gift, #, blank, ¡A todos les gustan los regalos!
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 del tema están disponibles para usar en nuestros planes Standard, Business y Enterprise.