Cómo añadir menú desplegable con encabezados de Discourse

He agregado los menús de encabezado en Discourse utilizando los componentes de la API de plugins de Discourse. Pero no tengo idea de cómo agregar menús desplegables con esos encabezados.

¿Podemos agregar menús desplegables con los encabezados de Discourse usando el plugin de la API de Discourse o de alguna otra manera?

Esperando una salida como la siguiente,

Quizás quieras echar un vistazo a este componente de tema: Header Submenus. Te permite crear un menú de encabezado con submenús. Puedes usar directamente ese componente o tomarlo como ejemplo de código para crear tu propio componente.

2 Me gusta

He revisado el componente de tu tema.

Ahí, los encabezados y los submenús se agregan antes del encabezado de Discourse. En realidad, esperamos que los encabezados con submenús se añadan a los encabezados de Discourse, que he marcado a continuación:

He resuelto este problema mediante la inserción de HTML personalizado a través de los eventos de la API del plugin de Discourse.

Inicialmente, instalé el componente “Custom Header Links” y configuré los encabezados como de costumbre. Luego, utilicé los eventos de la API de Discourse para insertar el HTML personalizado en el encabezado una vez que se cargaron los elementos del DOM del encabezado, como se muestra a continuación:

api.onPageChange(url => {
    if ($(".header-buttons").length != 0 && i == 0) {
        $('.custom-header-links .services-custom-header-links a').append("inserting icons");
        $(".header-buttons").prepend("adding ul tag elements");
        $(".resource-dropdown-menu").after("appending next ul element using first inserted ul element class name");
        i++;
    }
});

Aquí puedes agregar submenús al DOM de los encabezados. Sin embargo, esto genera problemas de alineación. Debemos mantener la alineación mediante CSS. Además, tendremos que escribir una función de clic para abrir el submenú y cambiar el color de fondo del encabezado, entre otras cosas. Gracias :slight_smile:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.