Riordina gli elementi esistenti del menu hamburger

Contribuisci UX
1

È possibile rimuovere o riordinare gli elementi preesistenti nel menu a hamburger? Ad esempio, spostare ‘About’ o ‘FAQ’ in alto, rimuovere ‘Keyboard Shortcuts’, ecc.

1 Mi Piace
2

Una riorganizzazione del menu, probabilmente no, ma la rimozione di elementi da qualsiasi parte dell’interfaccia utente può solitamente essere effettuata con regole CSS in Amministratore, Personalizza.

3 Mi Piace
3

Con CSS puoi fare qualcosa del genere…

.hamburger-panel .panel-body-contents {
  display: flex; /* Imposta un layout flex per riordinare gli elementi */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* Sposta i link del footer in alto */
    .keyboard-shortcuts-link {
     display: none !important; /* Nascondi il link alle scorciatoie da tastiera */
    }
  }
}

Potrebbe essere necessario regolare alcuni altri aspetti (bordi, spaziature), ma credo che questo ti porti al 90% del risultato.

8 Mi Piace
Custom Hamburger Menu Links
Custom sidebar sections being tested on meta
4

Sei un salvavita, Kris, grazie mille!! Quindi, allo stesso modo, potrei usare qualcosa come:

.hamburger-panel .panel-body-contents {
  display: flex; /* Imposta un layout flex per riordinare gli elementi */
  flex-direction: column;
  .menu-container-footer-links {
    order: -1;  /* sposta i link del footer in alto */
    .about-link {
    }
  }
}

se volessi spostare About o FAQ nei link generali invece che nel footer?

5

No, il CSS può solo spostare intere sezioni: non sarai in grado di spostare i link in sezioni diverse (credo che sia questo che chiedi, comunque).

3 Mi Piace
6

Che coincidenza! Sono appena venuto su Meta per fare esattamente questa domanda, ed è in cima alla lista delle discussioni. Che probabilità ci sono.

1 Mi Piace
7

Ah, ho capito! Grazie per la chiarificazione. Hai ragione: il mio obiettivo finale era spostare About e FAQ da footer a general, anche se sembra (in base al tuo esempio CSS iniziale) che io possa eliminare entrambe le sezioni e poi utilizzare qualcosa come questo:

per creare i link About e FAQ nella sezione general. Un po’ macchinoso, ma sembra fattibile.

3 Mi Piace
8

Dovrebbe funzionare. Io uso quel tema personalizzato, fa il suo dovere benissimo.

4 Mi Piace
9

@awesomerobot, grazie per il tuo aiuto. Potrei aggiungere chiedendo come potrebbe essere il codice per nascondere solo alcuni elementi nel menu hamburger in alto?

Ho provato a giocare con l’esempio di codice che hai fornito qui, ma non ho avuto fortuna.

Grazie

3 Mi Piace
10

Se fai clic con il tasto destro su uno dei link e selezioni ispeziona, vedrai i nomi delle classi associati a ciascuno… quindi, ad esempio, il link “ultimi” ottiene latest-topics-link

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

Per nasconderlo con CSS, dovresti fare così:

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

Ah sì, dimentico sempre la funzione ispeziona.

Perfetto, grazie!

2 Mi Piace
12

Ci sono suggerimenti per personalizzare il menu hamburger ora che è integrato nella barra laterale?

C’è un modo per spostare elementi dall’espansore Altro per renderli visibili al livello superiore?

E per quanto riguarda l’occultamento degli elementi? Ho provato questo senza successo:

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

Modifica: OK, questo ha funzionato per nascondere il link “Informazioni”:

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

Grazie mille!

1 Mi Piace