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.

[Johani (Joe)]

Acabo de subir una actualización a este componente.

DEV: v2 (#8)

No hay cambios visuales y, si has añadido CSS personalizado a tu tema, debería seguir funcionando porque el componente mantiene las mismas clases.

Eliminé la biblioteca externa que utilizaba anteriormente el componente y, por extensión, jQuery. Revisé los problemas reportados aquí, corregí el que pude reproducir y luego eliminé las respuestas para mantener todo ordenado. Si tu problema persiste después de la actualización, siéntete libre de publicarlo.

Más allá de eso, la actualización solo añade una nueva función: los submenús ahora se mostrarán al pasar el cursor en el escritorio, en lugar de requerir un clic.

[davidkingham]

Buenas noticias, Joe. Solo he encontrado dos problemas en el móvil.

1. Ya no puedes hacer scroll de lado a lado si tienes muchos elementos en el menú.
2. Al tocar un elemento en el menú desplegable, este permanece abierto.

[Johani (Joe)]

@davidkingham

Ya no puedes hacer scroll de lado a lado si tienes muchos elementos de menú.

Esto debería seguir funcionando, pero solo en la vista móvil. Por lo tanto, si solo lo pruebas en la vista móvil simulada del navegador sin cambiar el agente de usuario, no funcionará. ¿Podrías confirmar que lo estás probando en un teléfono real? De ser así, ¿podrías decirme qué dispositivo y navegador estás utilizando?

@davidkingham

Cuando tocas un elemento en el menú desplegable, este se mantiene abierto.

Yo también veo esto. La razón es que todo el comportamiento de apertura y cierre del menú desplegable ahora se maneja con CSS en lugar de JavaScript. No creo que CSS tenga una forma de manejar el cierre automático del menú desplegable después de hacer clic en él. Por lo tanto, debemos recurrir a JS para ese problema en particular. Lo haré después de que confirmes el problema de desplazamiento en el móvil.

[davidkingham]

Esto ocurre en un iPhone 8 con la aplicación de Discourse, y lo mismo en Safari. ¡Gracias, Joe!

[davidkingham]

¿Alguna novedad sobre esto, Joe? ¡Gracias!

[fidelio]

En el sitio de la comunidad de Sponge, tienen una integración muy agradable de esto en el encabezado principal en lugar de una capa adicional en la parte superior:

Sponge Forums

¿Cómo se puede lograr esto? Nos encantaría tenerlo en nuestro sitio.

[AntiMetaman]

¿Es posible agregar submenús a los enlaces del encabezado? Este componente del tema añade un nuevo menú encima del encabezado, pero algunas personas no desean un menú de navegación nuevo. Solo quieren la capacidad de pasar el cursor sobre los enlaces actuales del encabezado y ver submenús.

[Hugh_Roberts]

Eso es agradable. Me pregunto cómo lo hicieron.

[ElForoViajero]

¿Alguien está teniendo este problema? Los iconos de las redes sociales no funcionan (antes sí lo hacían) e incluso al usar un FA diferente no se muestran.

[davidkingham]

¿Has probado el prefijo fab, ya que al ser marcas, deben llevar este prefijo.

[ElForoViajero]

Gracias por tu respuesta @davidkingham. Añadí el prefijo fab, pero el logotipo no aparece.

[Steven]

No olvides editar los iconos en la lista de enlaces también; debes incluir el prefijo fab- en ellos.

[ElForoViajero]

¡Bingo! Eso fue ¡muchas gracias!

[Sentinelrv]

Hola, no estoy seguro de por qué, pero la configuración “Menu-item-active-background” no parece funcionar correctamente. Creo que debería simplemente cambiar el color de fondo del menú cuando paso el cursor, pero el color seleccionado está cubriendo completamente el texto. Mira esto…

Además, la configuración debajo de ella, “Menu-item-active-color”, no parece hacer nada. He probado diferentes códigos de color y nada cambia cuando voy a probarlo.

¿Alguna idea?

[Moksh]

Me gustaría colocar los submenús debajo del encabezado del sitio en lugar de arriba. ¿Podrías indicarme cómo hacerlo? Un fragmento de código sería de gran ayuda

[Moksh]

@Johani

@davidkingham

1. Al tocar un elemento en el menú desplegable, este permanece abierto

Yo también lo noto. La razón es que todo el comportamiento de apertura y cierre del menú desplegable ahora se maneja con CSS en lugar de JavaScript. No creo que CSS tenga una forma de cerrar automáticamente el menú desplegable después de hacer clic en él. Por lo tanto, tenemos que recurrir a JS para ese problema en particular. Lo haré después de que confirmes el problema de desplazamiento en móviles.

@Johani @davidkingham ¿Encontraron una solución para este problema: “Al tocar un elemento en el menú desplegable, este permanece abierto”?

Gracias

[davidkingham]

No, sigue comportándose así. Una solución potencial sería mostrar solo iconos en móviles, sin texto. ¿Qué opinas?

[Moksh]

¿Cómo resolver el problema mostrando solo iconos en móviles? “Cuando tocas un elemento en el menú desplegable, este permanece abierto”

[Moksh]

@ElForoViajero Tus submenús parecen funcionar bien tanto en escritorio como en móvil. En cuanto haces clic en un elemento del menú, la pantalla se actualiza y el menú se cierra automáticamente. ¿Tuviste que hacer algo especial?

RTP SLOT- Info Bocoran RTP Slot Pragmatic Play Hari Ini Winrate Tertinggi