Sottomenu dell'intestazione

[Discourse]

	Riepilogo	I Sottomenu dell’intestazione ti permetteranno di creare un menu nell’intestazione, con sottomenu, utilizzando semplice testo!
	Anteprima	Anteprima su Discourse Theme Creator
	Link al repository	https://github.com/discourse/discourse-header-submenus
	Nuovo a Discourse Themes?	Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Poiché si tratta di un componente del tema #ufficiale mantenuto dal team di Discourse, le richieste di #supporto, segnalazioni di bug, problemi di ux e richieste di #funzionalità possono essere inviate nelle rispettive categorie qui su Meta, etichettate con il tag appropriato del componente del tema. Clicca su uno dei link sottostanti per iniziare.

 Supporto  Bug  UX  Funzionalità

Funzionalità

Desktop

Mobile

Impostazioni

Nome	Descrizione
Elementi del menu	Aggiungi elementi al menu. Un elemento per riga in questo ordine: Testo, icona, titolo, visualizzazione.
Elementi del sottomenu	Aggiungi elementi al sottomenu. Un elemento per riga in questo ordine: Genitore, testo, icona, URL, target, titolo.
Icone SVG	Includi le classi di icone FontAwesome per ogni icona utilizzata nelle liste sopra.
Modalità fissa	Forza la visibilità del menu nella parte superiore dello schermo indipendentemente dalla posizione di scorrimento - Solo desktop
Mostra freccia	Mostra le icone a forma di freccia accanto agli elementi del menu
Inverti posizione	Visualizza gli elementi del menu sul lato opposto dello schermo
Sfondo menu	Colore di sfondo per il menu. (esadecimale, rgb, rgba o nome colore CSS)
Colore elemento menu	Colore per gli elementi del menu. (esadecimale, rgb, rgba o nome colore CSS)
Sfondo elemento menu attivo	Colore di sfondo per gli elementi del menu quando sono attivi. (esadecimale, rgb, rgba o nome colore CSS)
Colore elemento menu attivo	Colore per gli elementi del menu quando sono attivi. (esadecimale, rgb, rgba o nome colore CSS)
Sfondo sottomenu	Colore di sfondo per i sottomenu. (esadecimale, rgb, rgba o nome colore CSS)
Colore elemento sottomenu	Colore per gli elementi del sottomenu. (esadecimale, rgb, rgba o nome colore CSS)
Sfondo elemento sottomenu al passaggio del mouse	Colore di sfondo per gli elementi del sottomenu quando ci passi sopra con il mouse. (esadecimale, rgb, rgba o nome colore CSS)
Colore elemento sottomenu al passaggio del mouse	Colore per gli elementi del sottomenu quando ci passi sopra con il mouse. (esadecimale, rgb, rgba o nome colore CSS)
Colore divisore	Colore per le linee di divisione nei sottomenu. (esadecimale, rgb, rgba o nome colore CSS)

Ci sono quattro gruppi di impostazioni

1. Elementi del menu

   Inserisci gli elementi che vuoi far apparire nel menu. Un elemento separato da virgole per riga in questo ordine

   Testo, icona, titolo, visualizzazione

   Testo: ciò che appare nel menu.
   Icona: l’icona visualizzata accanto all’elemento. Se non vuoi usare un’icona, usa none.
   Titolo: il testo che appare quando ci passi sopra con il mouse sull’elemento.
   Visualizzazione: scegli su quali dispositivi l’elemento deve apparire.

   vdm appare sia su desktop che su mobile
   vdo appare solo su desktop,
   vmo appare solo su mobile.

   A causa della mancanza di spazio, non è consigliabile aggiungere più di 3-4 elementi su mobile.

2. Elementi del sottomenu

   Inserisci un elenco degli elementi del sottomenu che vuoi aggiungere al tuo menu. Un elemento separato da virgole per riga in questo ordine

   Genitore, testo, icona, URL, target, titolo

   Genitore: il nome dell’elemento del menu genitore sotto cui deve apparire questo elemento del sottomenu. Usa il valore testo dalla lista sopra.
   Testo: il testo che appare per questo elemento del sottomenu.
   Icona: l’icona per questo elemento del sottomenu; usa none se non è necessaria un’icona.
   URL: il percorso a cui punta questo elemento del menu. Puoi usare anche percorsi relativi.
   Target: scegli se questo elemento si aprirà in una nuova scheda o nella stessa scheda. Usa blank per aprire il link in una nuova scheda, o self per aprirlo nella stessa scheda.
   Titolo: il testo che appare quando ci passi sopra con il mouse sull’elemento.
   Divisori: puoi anche aggiungere divisori tra gli elementi del sottomenu. Per aggiungere un divisore usa genitore, divider.

Ecco un esempio rapido per coprire i punti 1 e 2 sopra:

Immagina di voler aggiungere un elemento del menu chiamato Design e di aggiungere alcuni elementi al suo sottomenu come mostrato qui sotto

Inizieresti inserendo questo come menu_item

Design, magic, Get inspired!, vdm

E poi inseriresti questi come elementi sub_menu

Design, Galleries, th, #, blank, Cool galleries for you to look at.
Design, Design process, lightbulb-o, #, blank, Learn the basics.
Design, Blog design, columns, #, blank, What makes for a great blog?
Design, divider
Design, Freebies, gift, #, blank, Everyone likes freebies!
Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.
Design, Design trends, bar-chart, #, blank, Stay on top of the current trends!

È tutto!

Il tema include di default un menu segnaposto, quindi dacci un’occhiata e chiedi se hai domande.

3. Opzioni di layout.

   Queste sono piuttosto autoesplicative

   

4. Opzioni di colore

   Queste sono vuote di default, ma se aggiungi un colore qui, sovrascriverà i valori predefiniti del componente, che si basano sulla combinazione di colori corrente.

Ospitato da noi? I componenti del tema sono disponibili per l’uso sui nostri piani Standard, Business ed Enterprise.

[Johani (Joe)]

I just pushed an update to this component.

https://github.com/discourse/discourse-header-submenus/commit/cbb1c280f031024335cf3b103b0e2c242c5862b1
There are no visual changes and if you’ve added custom CSS to your theme, it should still work because the component still has the same classes.

I dropped the external library that the component previously used and jQuery by extension. I went through the issues reported here, fixed the one I could reproduce and then deleted the replies to keep everything tidy. If your problem still persists after the update, please feel free to post it.

Beyond that, the update only adds one new feature. The submenus will now show on hover on desktop instead of requiring a click.

[davidkingham]

Bel aggiornamento, Joe. Ho riscontrato solo due problemi su mobile.

1. Non è più possibile scorrere lateralmente se hai molti elementi nel menu.
2. Quando tocchi un elemento nel menu a discesa, questo rimane aperto.

[Johani (Joe)]

@davidkingham

Non è più possibile scorrere orizzontalmente se hai molti elementi nel menu.

Questo dovrebbe ancora funzionare, ma solo nella visualizzazione mobile. Quindi, se lo testate semplicemente nella visualizzazione mobile finta del browser senza cambiare l’user agent, non funzionerà. Potreste confermare che state testando questo su un telefono reale? Se sì, potete dirmi quale dispositivo/browser state utilizzando?

@davidkingham

Quando tocchi un elemento nel menu a tendina, il menu rimane aperto

Anch’io vedo questo problema. Il motivo è che tutto il comportamento del menu a tendina (apertura/chiusura) è ora gestito con CSS invece che con JavaScript. Non credo che il CSS abbia un modo per gestire la chiusura automatica del menu dopo il clic. Quindi, per quel particolare problema, dobbiamo ricorrere al JavaScript. Lo farò dopo che avrai confermato il problema di scorrimento su mobile.

[davidkingham]

Questo è su un iPhone 8 con l’app Discourse, lo stesso in Safari. Grazie Joe!

[davidkingham]

Qualche aggiornamento su questo, Joe? Grazie!

[fidelio]

Sul sito della community di Sponge, hanno una bella integrazione di questo nell’intestazione principale invece di un livello aggiuntivo in alto:

Sponge Forums

Come si può ottenere questo? Lo vorremmo anche per il nostro sito.

[AntiMetaman]

È possibile aggiungere sottomenu ai link dell’intestazione? Questo componente del tema aggiunge un nuovo menu sopra l’intestazione, ma alcune persone non desiderano un nuovo menu di navigazione. Vogliono semplicemente la possibilità di passare il mouse sui link attuali dell’intestazione per visualizzare i sottomenu.

[Hugh_Roberts]

Che bello. Mi chiedo come abbiano fatto.

[ElForoViajero]

Qualcuno ha questo problema? Le icone dei social network non funzionano (prima sì) e nemmeno cambiando l’font di FontAwesome vengono visualizzate.

[davidkingham]

Hai provato il prefisso fab, dato che si tratta di marchi, devono avere questo prefisso.

[ElForoViajero]

Grazie per la tua risposta @davidkingham. Ho aggiunto il prefisso fab, ma il logo non appare.

[Steven]

Non dimenticare di modificare anche le icone nell’elenco dei link; devi includere il prefisso fab- in queste.

[ElForoViajero]

Bingo! Era proprio quello Grazie mille!

[Sentinelrv]

Ciao, non sono sicuro del motivo, ma l’impostazione “Menu-item-active-background” non sembra funzionare correttamente. Credo che dovrebbe semplicemente cambiare il colore di sfondo del menu quando passo il mouse sopra, ma il colore selezionato sta coprendo completamente il testo. Vedi qui…

Inoltre, l’impostazione sottostante “Menu-item-active-color” non sembra fare nulla. Ho provato diversi codici colore, ma quando provo a testarlo non cambia nulla.

Hai qualche idea?

[Moksh]

Vorrei posizionare i sottomenu sotto l’intestazione del sito invece che in alto. Potresti dirmi come fare? Un frammento di codice sarebbe utile

[Moksh]

@Johani

@davidkingham

1. Quando tocchi un elemento nel menu a tendina, il menu rimane aperto

Anche io vedo questo problema. Il motivo è che tutto il comportamento di apertura/chiusura del menu a tendina è ora gestito con CSS invece che con JavaScript. Non credo che il CSS abbia un modo per gestire la chiusura automatica del menu dopo il clic. Quindi, per questo specifico problema, dobbiamo tornare a usare JavaScript. Lo farò dopo che avrai confermato il problema dello scorrimento su mobile.

@Johani @davidkingham Avete trovato una soluzione per questo problema: “Quando tocchi un elemento nel menu a tendina, il menu rimane aperto”?

Grazie

[davidkingham]

No, si comporta ancora così. Una soluzione possibile è mostrare solo le icone su mobile senza testo. Che ne pensi?

[Moksh]

Come risolvere il problema mostrando solo le icone su mobile? “Quando tocchi un elemento nel menu a discesa, il menu rimane aperto”

[Moksh]

@ElForoViajero I tuoi sottomenu sembrano funzionare correttamente sia su desktop che su mobile. Non appena clicchi su un elemento del menu, lo schermo si aggiorna e il menu si chiude automaticamente. Hai dovuto fare qualcosa di particolare?

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