Visite: 186

Valutazione attuale: 0 / 5

La Socials bar è un semplice modulo di tipo menu con layout Socials

Il menu contiene la lista dei link esterni.

Ogni voce di menu è di tipo URL.

Per la visualizzazione dell'icona si usa la Classe Immagine.

L'elenco completo delle icone è disponibile alla pagina Icone - Bootstrap Italia.

Visite: 435

Valutazione attuale: 0 / 5

Il Top è la parte superiore del sito e presenta due distinti moduli di tipo menu: uno denominato brand e l'altro denominato top.


Il menu brand contiene i link a Bootstrap Italia, Joomla! e ItaliaPA4

Per ottenere il risultato desiderato bisogna agire sui parametri del modulo, selezionando il Layout Brand

Layout = 'brand'


Il modulo Top è un semplice modulo di tipo menu, ma la sua costruzione è un po' più complessa. Infatti, sfruttando una caratteristica intrinseca del template è possibile inserire un modulo direttamente nel modulo menu.

Il modulo in oggetto è il modulo Lingua. Per poterlo inserire in un menu basta creare, all'interno dello stesso, una voce di tipo Separatore il cui alias sia nella forma module-<id>, dove id è l'id del modulo da inserire.

La voce di menu di tipo Separatore deve avere la seguente Classe CSS del link.

Classe CSS del link = 'ipa4-module'

Non resta che completare la formattazione aggiungendo il seguente Suffisso classe CSS modulo per allineare il modulo a destra.

Suffisso classe CSS modulo = ' ml-auto'

Sia nel caso della Classe CSS del link che del Suffisso classe CSS modulo è molto importante lasciare lo spazio prima del valore.


Completiamo il lavoro sul Top menu aggiungendo la possibilità di nascondere il menu su dispositivi mobile. 

Per ottenere il risultato desiderato bisogna agire sui parametri del modulo Top. Impostando il Layout

Layout = 'collapsible'

E lo Stile Modulo come segue:

Stile Modulo = 'none'

Visite: 762

Valutazione attuale: 0 / 5

In questo breve articolo sarà mostrato come creare un semplice ma completo megamenu per il nostro sitoweb basato su ItaliaPA4. Il risultato finale sarà quello mostrato in figura.

Ma andiamo con ordine.


Il primo passo è quello di creare un semplice menu.

Creiamo un semplice menu ed assegniamolo alla posizione megamenu.

Il menu avrà le seguenti voci.


Il semplice uso di voci di menu di tipo Titolo separatore permette di creare intestazioni per organizzare le voci del singolo menu in blocchi.


Per creare un menu multicolonna basta strutturare la voce di menu con un livello aggiuntivo.

Nel caso in esame le voci di menu J2XML 3.3 e Importer 1.5 sono state abbassate di livello e sono state poste sotto J2XML, mentre la voce di menu ItaliaPA4 è stata posta sotto Italia.

Naturalmente è possibile aggiungere instestazioni anche nel caso di voci di menu multicolonna.


Possiamo creare strutture colonnari asimmetriche per dar spazio a sottosezioni più popolate. Nell’esempio seguente abbiamo una struttura composta da due colonne a sinistra ed una a destra.

Basta inserire una voce di menu di tipo Separatore con la seguente Classe CSS del link nel punto in cui intendiamo suddividere la colonna.

Classe CSS del link = megacolumn


Aggiungiamo un po' di stile inserendo delle icone alle voci di menu mediante la Classe Immagine.

Classe Immagine = it-xml

Elenco delle icone disponibili.


Per completare il lavoro sul megamenu non manca che la voce di footer Tutti i progetti.

Alla voce Footer di tipo Separatore assegniamo la Classe CSS del link

Classe CSS del link = it-megamenu-footer

Mentre alla voce di menu Tutti i progetti assegniamo le seguenti classi come segue:

Classe CSS del link = list-item medium li:it-more ul:ml-auto

Classe Immagine = it-arrow-right

Visite: 5398

Valutazione attuale: 0 / 5

Il Web Toolkit mette a disposizione il componente Dialog per la visualizzazione di finestre modali per mostrare contenuti in evidenza, notifiche agli utenti, o contenuti personalizzati.

Visite: 5636

Valutazione attuale: 0 / 5

Il Web Toolkit mette a disposizione un componente per la visualizzazione dei tooltip. A differenza di quanto ci si possa apettare, il tooltip compare al click e non al passaggio del mouse sulla parola chiave.

Torna su