eshiol.it

È possibile realizzare un megamenu in stile design scuole utilizzando ItaliaPA e it Web Toolkit?

Si, ed è anche abbastanza semplice. Basta seguire questa guida passo passo.

Tutto ha un inizio

Ma andiamo con ordine. creiamo un un classico megamenu in stile ItaliaPA con le voci di esempio di design scuole.

Impostiamo il tema scuola e creiamo un menu in posizione mainmenu.

Separati è meglio

Procediamo separando il menu in due, la prima parte con le voci di menu principali sulla sinistra, e la seconda parte con le voci di menu secondarie (argomenti) allineate a destra.

Per suddividere il menu basta aggiungere la classe link "li:u-flexExpandLeft" alla prima voce di menu che vogliamo sulla destra.

Un po' di colore

Il prossimo passo è quello di modificare il colore delle voci di menu.

Possiamo utilizzare le classi colore messe a disposizione del web toolkit oppure caricarne di nuove personalizzando il template.

Nel caso si decida di personalizzare il template, ecco un estratto del file user.css con i colori dello stile design scuole:

.u-color-redbrown {
 color: #D1344C !important;
}
.u-color-greendark {
 color: #0E8A5F !important;
}
.u-color-purplelight {
 color: #B21DD0 !important;
}
.u-color-bluelectric {
 color: #0D00FF !important;
}
.u-color-graydark {
 color: #455b71 !important;
}

Una soluzione alternativa

Se il menu non è proprio come ce lo aspettavamo, nessuna paura. Un piccolo bug non permette una corretta formattazione se si utilizza la classe link.

In attesa che la PR#442 sia resa disponibile in un prossimo aggiornamento, è possibile risolvere con un piccolo workaround. Basta aggiungere la classe link "li:Megamenu-item" a tutte le voci di menu.

Anche le dimensioni hanno la loro importanza

Ci siamo quasi. Aggiungiamo le classi u-textWeight-400 e u-text-xs ai link Argomento 1, Argomento 2 e Argomento 3 per avere esattamente il menu come desiderato.. oppure no?

Il web Toolkit forza la dimensione dei link delle voci del megamenu. Per superare questo vincolo bisogna aggiungere le seguenti righe al file user.css

.Megamenu-item > a.u-textWeight-400 {
 font-weight: 400 !important;
}
.Megamenu-item > a.u-text-xs {
 font-size: 1.6rem !important;
}

Completiamo impostando il padding, sempre nel file user.css, per avere lo stesso distanziamento delle voci di menu della demo di design scuole:

.Megamenu-item > a {
 padding: 10px 17px 10px 17px;
} 

Conclusioni

La procedura per la creazione di un megamenu in stile design scuole è abbastanza semplice anche se richiede un po' di lavoro.

Di seguito il dettaglio della configurazione delle voci di menu

Scuola

u-color-redbrown

Servizi

u-color-greendark

Novità

u-color-purplelight

Didattica

u-color-bluelectric

Argomento 1

u-flexExpandLeft u-textWeight-400 u-text-xs u-color-graydark

Argomento 2

u-textWeight-400 u-text-xs u-color-graydark

Argomento 3

u-textWeight-400 u-text-xs u-color-graydark

Tutti gli argomenti...

u-color-graydark

Come accennato nel paragrafo Una soluzione alternativa, potrebbe essere necessario aggiungere la classe link li:Megamenu-item a tutte le voci di menu.

Di seguito il dettaglio delle classi css da inserire nel file user.css

.u-color-redbrown {
 color: #D1344C !important;
}
.u-color-greendark {
 color: #0E8A5F !important;
}
.u-color-purplelight {
 color: #B21DD0 !important;
}
.u-color-bluelectric {
 color: #0D00FF !important;
}
.u-color-graydark {
 color: #455b71 !important;
}
.Megamenu-item > a.u-textWeight-400 {
 font-weight: 400 !important;
}
.Megamenu-item > a.u-text-xs {
 font-size: 1.6rem !important;
}
.Megamenu-item > a {
 padding: 10px 17px 10px 17px;
}