Il tema di Design Italia prevede l’utilizzo del mega-menu realizzato da Bootstrap Italia.

Il menu realizzato è presente nel repository di Bootstrap Italia; in particolare viene riprodotto l’esempio classico che riporta Intestazione e link “more”.

Il menu è posizionato nella testata e può esser utilizzato in alternativa al classico menu (Main Menu), come navigazione principale. Una volta selezionata la posizione si potrà creare un nuovo menu oppure associarlo a uno esistente.

Per usare questo menu bisognerà associare nella sezione “Gestione posizioni”, all’interno di Aspetto > Menu, il menu.
Nell’immagine di seguito non è stato ancora associato alcun menu alla posizione interessata.

Per sfruttare al meglio le possibilità del mega-menu ci sono 2 classi CSS che possono esser utilizzate per ottenere un risultato ottimale.

Classi CSS opzionali

· heading

Aggiungendo questa classe nell’apposita casella (Classi CSS), ti ottiene un titolo non cliccabile, con una formattazione differente dai link classici (vedi HEADING 1).

· more

Aggiungendo questa classe, viene aggiunto il link formattato per raggiungere tutti gli articoli inerenti (vedi View More). Per aggiungere la freccia suggerisco di utilizzare le icone di Line Awesome integrate nel tema.

Di seguito un esempio di come costruire la struttura del menu.
Il primo livello sarà la label visibile della navigazione (Utilizzo mega-menu), il primo sottoelemento sarà il primo elemento della prima colonna (Titolo della colonna), annidato a questo ci sarà il secondo elemento della prima colonna (Primo link della prima colonna); inserendo un elemento al livello superiore si inserirà una nuova colonna, con poi al suo interno il secondo elemento della nuova seconda colonna creata.

Tutti i sottoelementi creati saranno all’interno del dropdown.

Qualora non fosse visibile il campo Classi CSS, è possibile attivarlo selezionando l’apposita spunta all’interno di Impostazioni schermata in alto a destra.