Navigazione principale con il mega-menu

Come sfruttare al meglio il mega-menu per creare un ricco menu di navigazione principale, con le classi CSS disponibili.

Data:
11 Settembre 2019

Anteprima del mega-menu

Anteprima del mega-menu

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”.

Source mega-menu

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.

Menu – Gestione posizioni

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.

Menu – Struttura del menu

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

Articoli correlati

Widget personalizzato secondo le linee guida

Un versatile widget personalizzato per esporre una lista di articoli in linea con Design Italia: “DesignItalia – Articoli a griglia”

Leggi di più  
Navigazione principale con il mega-menu

Come sfruttare al meglio il mega-menu per creare un ricco menu di navigazione principale, con le classi CSS disponibili.

Leggi di più  
Personalizza l’aspetto del tema

Il tema permette diverse possibilità di personalizzazione dell’aspetto: dai menu ai widget, dai colori ai loghi.

Leggi di più