Come creare un menù di navigazione in un template per Joomla!, utilizzando Boostrap 5. Quarto articolo dedicato alla creazione di template custom per Joomla! 4.
Eccoci ad un nuovo articolo di questa serie, nei precedenti ti ho parlato di:
In questo quarto capitolo vedremo assieme come creare in Joomla! 4 un menù di navigazione responsive utilizzando il framework Bootstrap 5.
Useremo la documentazione ufficiale di Bootstrap relativa alle navbar e applicheremo un override del modulo per far fuzninare correttamente il tutto.
Prima di iniziare sul sito di test che stai realizzando seguendo le mie guide, crea delle voci di menù, bastano anche delle voci di menù di sistema del tipo url, almeno una delle voci che creerai dovrà essere di secondo livello.
Una volta fatto il front end del tuo sito si presenterà all'incirca così:
Il menù di navigazione principale si visualizza all'interno del contenitore principale e non ha nessuno stile visivo, le voci di menù sono una sotto l'altra e quella di secondo livello non funziona.
Dovrai lavorare per modificare questa situazione, io ti mostrerò un esempio per realizzare un menù di navigazione che rimanga fisso allo scorrimento della pagina e che possa utilizzare voci di secondo livello (dropdown).
Passo 1: realizziamo la navbar
Precedentemente avevo inserito la posizione del modulo di navigazione all'interno del contenitore principale del sito, ora la posizionerò esternamente per avere una barra di navigazione che si estenda orizzontalmente a tutta la finestra del browser.
Prima del "container" incolla questo codice:
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Titolo del sito</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<jdoc:include type="modules" name="navigazione" style="none" />
</div>
</div>
</nav>Cosa fa nel dettaglio questo codice?
Inserisce una "barra di navigazione" che rimarrà fissa in alto (classe fixed-top) ed utilizzerà uno sfondo scuro (classe bg-dark), all'inteno della barra troviamo il titolo del sito <a class="navbar-brand" href="#">Titolo del sito</a>, per ora inserito in modo manuale, vedremo in seguito come inserire un logo o un titolo da backend, un bottone che si visualizzerà solo nella versione mobile del menù (<button>) e infine il vero e proprio menù di navigazione che verrà chiamato attraverso il modulo (<jdoc:include type="modules" name="navigazione" style="none" />).
Il risultato che otterrai sarà all'incirca questo:
Stai visualizzando una barra bianca racchiusa in una barra nera, questo accade perchè nell'artico precedente avevamo personalizzato il div container con uno sfondo bianco, il container viene utilizzato anche nella barra di navigazione per cui userà le stesse impostazioni.
Dovrai utilizzare il tuo style.css per personalizzare questo aspetto, aprilo e alla riga nove incolla questo codice:
/*navigazione*/
.navbar .container{background-color:transparent;}la barra bianca non si visualizzerà più e compariranno le voci di menù anche se con una visualizzazione piuttosto brutta
Passo 2: crea l'override del modulo menù
L'immagine precedente mostrà un menù di navigazione piuttosto brutto, si può risolvere tutto realizzando un override del modulo menù, per cui dal backend di Joomla! 4 vai nella sezione template, seleziona il tuo template custom, spostati nella tab crea override e nella parte relativa ai moduli clicca su mod_menu.
Terminata la procedura nella cartella del tuo template troverai una sotto cartella nominata html, che conterrà tutti gli override che vorrai effettuare, ora conterrà una sotto cartella mod_menu con tutta un serie di file, per il nostro scopo puoi cancellarli tutti tranne default.php.
il tuo menù di navigazione si presenterà così:
Il menù di navigazione principale ora sarà completamente funzionante e anche gradevole alla vista.
A questo punto dovrai aggiornare il file templatedetails.xml per informare Joomla! che il tuo template utilizza una nuova cartella, per cui aprilo e alla riga 12 incolla questo codice
<folder>html</folder>Passo 3: personalizzazioni finali
Il menù di navigazione così vicino al titolo del sito non mi piace, come non mi piacciono tutte le voci in grigio, per cui voglio personalizzarlo ancora.
Di nuovo bisogna usare il file style.css, alla riga 11 ho inserito questo codice:
#navbarNav {justify-content:end;}
.navbar-nav li a{color:#fff!important}
.navbar-nav li ul li a{color:#222!important;}In pratica ho utilizzato gli attibuti della proprità css Flex per "dire" di posizionare il menù alla fine del div, ho detto ci colorare i link delle voci di menù principale di bianco e di colorare i link delle voci secondarie di nero, dato che lo sfondo di queste voci è bianco.
Rimane da sistemare il container principale, al momento una parte rimane al di sotto del menù di navigazione, il breadcrumb non viene visualizzato.
Tramite ispezione codice del browser, sono andato a vedere quanti pixel misura di altezza la navbar (56) e ho modificato la riga 8 dello style.css
.container{background-color:#fff; margin-top:62px;}Ho inserito 62px perchè ho voluto staccarlo dal menù.
Bisogna tener conto che esiste un container anche dentro alla barra di navigazione, se mi fermassi qua con le personalizzazioni anche lui avrebbe un margine dall'alto di 62px, per cui ho modificato la riga 10 in questo modo:
.container{background-color:#fff; margin-top:56px;}ecco il risultato finale:
Ho effettuato delle personalizzazioni molto semplici, ti consiglio di sperimentare, provare e riprovare fino arrivare al risultato che desideri.
Nel prossimo articolo di questa serie l'argomento sarà:: Inserire il logo in un template custom per Joomla! 4
Se hai domande scrivile nei commenti.