Reorganizar elementos existentes del menú hamburguesa

Contribuir UX
1

¿Es posible eliminar o reorganizar los elementos preexistentes del menú hamburguesa? Por ejemplo, mover ‘Acerca de’ o ‘Preguntas frecuentes’ a la parte superior, eliminar ‘Atajos de teclado’, etc.

1 me gusta
2

Reorganizar el menú, probablemente no, pero eliminar elementos de cualquier parte de la interfaz de usuario generalmente se puede hacer con reglas CSS en Administrar, Personalizar.

3 Me gusta
3

Con CSS puedes hacer algo como…

.hamburger-panel .panel-body-contents {
  display: flex; /* Configura un diseño flex para poder reordenar elementos */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* mueve los enlaces del pie de página a la parte superior */
    .keyboard-shortcuts-link {
     display: none !important; /* Oculta el enlace de atajos de teclado */
    }
  }
}

Es posible que necesites ajustar algunos otros aspectos (bordes, espaciado), pero creo que esto te llevaría al 90% del camino.

8 Me gusta
Custom Hamburger Menu Links
Custom sidebar sections being tested on meta
4

¡Eres un salvavidas, Kris, muchísimas gracias!! Entonces, de manera similar, podría usar algo como:

.hamburger-panel .panel-body-contents {
  display: flex; /* Configura un diseño flex para que puedas reordenar elementos */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* mueve los enlaces del pie de página a la parte superior */
    .about-link {
    }
  }
}

¿si quisiera mover Acerca de o Preguntas frecuentes a los enlaces generales en lugar del pie de página?

5

No, CSS solo puede llegar tan lejos como mover secciones enteras: no podrás mover enlaces a diferentes secciones (creo que eso es lo que estás preguntando, de todos modos).

3 Me gusta
6

¡Qué casualidad! Acabo de venir a Meta para hacer exactamente la misma pregunta, y está en lo alto de la lista de discusiones. Qué probabilidades.

1 me gusta
7

¡Ah, entendido! Gracias por la aclaración. Tienes razón: mi objetivo final era mover About y FAQ de footer a general, aunque parece (basado en tu ejemplo inicial de CSS) que puedo eliminar ambas secciones y luego usar algo como esto:

para crear los enlaces About y FAQ en la sección general. Un poco chapucero, pero aparentemente viable.

3 Me gusta
8

Eso debería funcionar. Yo uso ese tema personalizado y funciona muy bien.

4 Me gusta
9

@awesomerobot, gracias por tu ayuda. ¿Podría agregar a esto preguntando cómo podría verse el código para simplemente ocultar algunos de los elementos en el menú hamburguesa superior?

He intentado experimentar con el ejemplo de código que has puesto aquí, pero no he tenido suerte.

Gracias

3 Me gusta
10

Si haces clic derecho en uno de los enlaces y seleccionas ‘Inspeccionar’, verás los nombres de clase asociados a cada uno… por ejemplo, el enlace “más reciente” tiene latest-topics-link

58%20PM
58%20PM818×328 28.9 KB

Para ocultarlo con CSS, harías lo siguiente:

.menu-panel li a.widget-link.latest-topics-link {
  display: none;
}
6 Me gusta
11

Ah sí, siempre olvido la función de inspección.

Perfecto, ¡gracias!

2 Me gusta
12

¿Algún consejo sobre cómo personalizar el menú de hamburguesa ahora que está integrado en la barra lateral?

¿Hay alguna forma de mover elementos del expansor Más para que sean visibles en el nivel superior?

¿Y qué hay de ocultar elementos? Intenté esto sin éxito:

.d-sidebar .sidebar-sections .sidebar-section-link li a.sidebar-section-link-faq{
  display: none;
}

Edición: OK, esto funcionó para ocultar el enlace “Acerca de”:

.sidebar-wrapper li a.sidebar-section-link-about {
    display: none;
}

¡Muchas gracias!

1 me gusta