Back to top

Valutazione attuale: 0 / 5

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 
Informazioni utiliContinuiamo i nostri approfondimenti sulla personalizzazione dei menu, iniziata da tonicopi con il suo articolo "Menù con icone".
Oggi presento i passi necessari per creare un sottomenu. Avere una struttura a sottomenu può essere molto utile, così possiamo suddividere i link in "sezioni" ed evitare più menu diversi.
Nell'esempio che userò, per continuare sull'esempio dell'articolo citato, farò un menu chiamato menù (per esempio di un ristorante, scusate il gioco di parole Sorridente).

Per creare una struttura di questo genere è necessario usare due livelli di voci di menu. Vediamo i passi da fare.

Dal back-end bisogna andare su Gestione menu e poi creare un Nuovo menu inserendo il nome (deve essere univoco), titolo, descrizione e nome del modulo.
Una volta creato il menu passiamo a creare le singole voci.
Prima creo le voci principali (le così dette di primo livello del menu) poi quelle del sottomenu vero e proprio (dette di secondo livello).
Per creare una nuova voce del menu si sceglie il menu appena creato dal menu orizzontale del backend e scegliere Nuovo.
Creiamo come esempio la voce "I primi": andare su Nuovo, scegliere il tipo di collegamento (per esempio può essere un articolo oppure un componente) e riempire con i dati richiesti.
Una volta create le varie voci principali del menu (come possiamo vedere dalla seconda figura), creiamo le voci del sottomenu.
Poniamo che per il nostro Menù sia necessario suddividere le voci in questo modo:
  • i primi divisi in primi di pasta e minestre;
  • i secondi divisi in secondi di pesce e secondi di carne;
  • le altre voci (contorni, dolci e bevande) non hanno ulteriori suddivisioni.
Queste voci si creano in maniera simile alle altre, soltanto alla voce "Elemento" bisogna specificare a quale voce di primo livello si vuole collegare la nuova.
Nel caso dei "Primi di pasta" dopo aver inserito il titolo, l'alias e indicato il menu Menù bisogna selezionare come elemento "I primi" (vedi terza figura).
Una volta aggiunte tutte le voci desiderate otteniamo una visuale come quella nella figura successiva, dove viene esplicitamente indicato quali sono le voci di primo livello e quelle di secondo livello.
Una visione ad albero come questa viene utilizzata molto spesso, per esempio quando creiamo con un componente per le immagini una galleria e delle sottogallerie.
Ma non è finita qui.
In Joomla i menu sono dei moduli. Questi moduli determinano tre cose:
  • come apparirà il menu;
  • in quale posizione della pagina verrà mostrato;
  • in quali pagine deve essere mostrato;
Farò due esempi: il primo mostra un modulo che visualizza tutti gli elementi del menu, il secondo invece crea diversi moduli che mostrano le voci come moduli separati. In particolare il secondo esempio farà visualizzare il sottomenu nella pagina del link di primo livello (esempio comparirà nella pagina "I primi").

Prima applicazione
Questo primo esempio serve per fare vedere come si crea un nuovo modulo che visualizza tutti gli elementi del nostro nuovo menu. E' necessario seguire questi passi:
  1. cliccare su Estensioni nel menu orizzontale del backend e poi Gestione moduli. Fare clic su Nuovo e selezionare "Menu";
  2. inserire il titolo del nostro menu, la posizione e l'ordine (questo per indicare in quale parte della pagina deve comparire);
  3. nella sezione "Assegnazione Menu" scegliere tutte le pagine su cui si vuole visualizzare il modulo;
  4. nella sezione "Parametri dei moduli" assegnargli la voce del menu che abbiamo creato (Menù nel nostro esempio) e lo stile che gli vogliamo dare. Sono presenti quattro stili: lista (quello di default), verticale, orizzontale e lista flat. Quest'ultima non divide le voci nel sottomenu, ma le pone tutte come di primo livello;
  5. salvare.
Nella figura possiamo vedere il risultato finale.

Osservazione: se si utilizza il template "rhuk_milkyway" e si desidera che il menu abbia un aspetto simile agli altri menu, in Parametri Avanzati bisogna inserire "_menu" nel Suffisso class modulo (questo varrà anche per l'esempio successivo).

Seconda applicazione

Qui invece creiamo dei menu separati (sfruttando quello già fatto) per i livelli inferiori che abbiamo creato.

Osservazione: quello che verrà detto adesso non funziona se è attivato il SEF ma non il mod_rewrite nella configurazione globale.

Ecco i passi da fare in questo caso:
  1. aprire il nostro menu principale (menù) dalla gestione dei moduli;
  2. cambiare eventualmente il titolo;
  3. selezionare la posizione (supponiamo la sinistra);
  4. in Parametri Modulo selezionare il menu creato;
  5. cambiare lo stile del menu con lista;
  6. impostare Inizio livello a 0 ed Fine livello a 1 (1);
  7. salvare;
  8. andare su estensioni e scegliere gestione moduli;
  9. cliccare su nuovo e scegliere come tipo il nostro menu, dare il titolo (nel nostro esempio usiamo "I nostri primi") e la posizione;
  10. su Assegnazione menu scegliere "Seleziona dalla lista" e selezionare le voci che ci interessano ("Primi", "Primi di pasta" e "Minestre");
  11. in Parametri dei moduli selezionare il nome del menu scegliendo il nostro tipo di menu e il tipo di stile (impostiamolo sempre a list);
  12. impostare Inizio livello a 1 ed Fine livello a 2;
  13. salvare;
  14. adesso se nel nostro sito clicchiamo su I primi comparirà la pagina dei primi e in questa pagina comparirà il menu appena creato con le voci "Primi di pasta" e "Minestre";
  15. eseguire la stessa procedura (cambia solo il passo 10 e il titolo nel passo 9) per i secondi piatti.
Alla fine avremo due menu separati come quelli nelle ultime due figure.

Abbiamo così ottenuto i nostri sottomenu.

(1) Inizio livello e Fine livello sono due parametri presenti nel modulo dei menu della versione 1.5 di Joomla. Consentono di controllare i livelli indicati relativi alla voce di menu.

Visto che siamo a parlare di cibi, non mi resta che augurarvi buon appetito...


Riferimenti:
Creating a submenu

CommentaCommenta questo articolo sul forum

Joomla.it su Google Plus

JoomlaDay Italia

JoomlaDay
kreatif-multimedia-logo