menu di navigazione del network

Www.coesionemezzogiorno.it

  • Titolo - Ministro per la Coesione territoriale e il Mezzogiorno
  • URL - http://www.coesionemezzogiorno.it/
  • Descrizione - Il sito istituzionale del Ministro per la Coesione Territoriale e il Mezzogiorno
  • Data del lancio - 21 giugno 2017
  • Stato di avanzamento - “Lavori in corso” :laughing:
  • Realizzazione - Risorse interne

Il sito è stato realizzato montando nel CMS Umbraco l’implementazione di riferimento delle linee guida https://italia.github.io/ita-web-toolkit/.
Il progetto implementa dei tipi di documento generici che consentono al redattore una grande libertà di creazione e organizzazione dei contenuti.

1 Like

Ciao, complimenti innanzitutto.
Ti volevo fare una nota. Da iPad, noto che i mega menu non si espandono. Non so se sia una cosa voluta o meno.

Ciao, Emanuele…

Uhhmmmm… ovviamente è un bug, ma più generico: il megamenu non funziona con Safari (nemmeno su Mac, se non altro sarà più facile da debuggare).
Adesso vediamo.

Grazie,

Marco

Uhhmm… il modello IWT si comporta in modo ancora diverso diverso: su un iPad vero si apre (almeno mi pare), mentre su Safari su Mac manda al link collegato al “primo livello”.

Non c’è bootstrap li dietro ne no?
Hai usato proprio il web kit ufficiale o l’hai riprodotto?

proverei levando i link alle voci di primo livello (es. /it/gallerie). le voci di primo livello nel caso specifico sono infatti dei ‘bottoni’ che dovrebbero limitarsi a causare l’aperura dei sotto-menu e non avere un href valorizzato (altrimenti cliccandoci sopra vengo diretto alla pagina a cui linkano).

1 Like

No, il toolkit non usa bootstrap… Ho montato il kit su Umbraco praticamente senza modifiche, e infatti lo stesso comportamento lo fa la pagina di esempio del kit (almeno su Mac):
https://italia.github.io/ita-web-toolkit/components/preview/page--megamenu.html

Ho capito,
io l’ho riscritto tutto in bootstrap, pertanto non ho gli stessi problemi.
La soluzione più banale potrebbe essere quella di Danilo Spinelli, di togliere i link dal primo livello.
Prova e facci sapere.

Emanuele.

Si, togliendo il link funziona, ma mi piacerebbe una soluzione più pulita…

Un’altra soluzione può essere di recuperare il clic sul link con javascript con la funzione preventDefault();
A questo punto, hai praticamente disabilitato il clic sul link ipertestuale, potrebbe funzionare il menu.
Non conoscendo il codice esatto del toolkit che manovra il dropdown non saprei dirti altro.

1 Like

Mettendo mano al codice del megenu ci sarebbe da correggere un altro problema, ovvero che non si chiude quando perde il focus da tastiera: se navighi con la tastiera e, a suon di tab, esci dal menù, questo rimane aperto, di fatto violando la L.4/2004.
Noi avevamo messo una pezza che si è persa nei vari aggiornamenti, devo rimettercela.

ciao @metsessantaset
puoi chiarire cosa intendi con:

E’ uno scenario un po’ patologico, e forse più che nel megamenu il problema è nel menu hamburger…
Se navighi da tastiera con il menù hamburger (qui sta la patologia), quando selezioni l’hamburger e dai invio, correttamente si apre, ma quando continui a scorrere i link, alla fine esci dal menu e “finisci” nel resto della pagina, che però è oscurata dal menu…
Bisogna che il menu si chiuda quando il focus raggiunge dei link esterni al menu, altrimenti la navigazione da tastiera risulta impedita.

Adesso abbiamo rimesso la pezza che risolve il problema: c’è un evento che scatta al focusin() sulla div #main e chiude il menu…

ottimo :slight_smile: in generale (e nel caso specifico) è possibile condividere la soluzione facendo un pull request su GitHub https://github.com/italia/ita-web-toolkit

Beh, questa è una pezza, non una soluzione :joy:
Abbiamo anche messo un’altra pezza per fare in modo che il megamenu funzioni con l’header fisso… (nel toolkit se abiliti l’header fisso col megamenu si mangia un pezzo al caricamento della pagina, immagino sia il motivo per cui non è abilitato di default).

quale intendi per web kit ufficiale?

E’ il cosiddetto Web Toolkit, l’implementazione di riferimento delle Linee Guida.
Lo trovi qui: https://github.com/italia/design-web-toolkit.
Il sito Coesione Territoriale e Mezzogiorno è fatto con un CMS (Umbraco) su cui abbiamo montato il codice HTML del Toolkit così com’è.
Lo stesso “tema”, poi, lo abbiamo riusato in moltissimi siti di Mnistri senza portafoglio e strutture varie.

1 Like