Il template Protostar di Joomla 3 dovrebbe disporre di un menù responsive, ma chi ha provato ad usarlo su dispositivi mobile si è accorto che non è proprio così. Vediamo come implementare un menù veramente responsive per mobile.

Il menù top presente nel template Protostar di Joomla! 3 è uno dei più usati nella realizzazione dei siti, ma poi ci si rende conto che, seppur il template è dichiarato come responsive, il menù, non lo è in toto.

Protostar: responsive e quasi mobile

Il menù top è sfruttabile su più livelli e nelle ultime versioni di Joomla se ne possono usare due senza alcun intervento su codice o css; in modalità desktop il secondo livello è visualizzato con una graziosa nuvoletta, nuvoletta che viene mantenuta anche nella visualizzazione compatta dei dispositivi mobile (in particolare parliamo di smartphones).

Il problema è che questa 'nuvoletta', che si apre al passaggio del mouse, non è così 'responsive' quando a passare è il dito sul dispositivo touch, infatti molti utenti si lamentano dell'impossibilità di accedere alle sottovoci del menù quando la navigazione è fatta tramite smartphone, sia esso Anrdroid che IOS.

Un altro punto a sfavore di questo menù è che resta sempre visibile, il che se è un comportamento sicuramente giusto sugli schermi ampi di portatili e tablet, non lo è certo sugli schermi a bassa risoluzione della maggior parte degli smartphone, i quali hanno schermi inferiori ai quattro pollici. In questi casi togliere spazio alla pagina non è certo una buona idea, inoltre il menù aperto può reagire al tocco, anche se fatto per attivare lo scrolling, come se fosse la selezione di un link.

Un menù veramente responsive con Protostar

Protostar è basato sul framework boostrap,  vediamo quindi sfruttarlo per rendere il menù veramente adatto all'uso con i dispositivi mobile.

Ci occuperemo poco della grafica, in questo articolo, però alcuni interventi sul css saranno necessari; piuttosto che modificare il file di css del template aggiungeremo un nuovo file nella directory specifica, creiamo quindi il file /templates/protostar/css/custom.css, ora modifichiamo l'entry point del template /templates/protostar/index.php ed aggiungiamo il caricamento del nostro css subito dopo il caricamento del css standard. Cercate il codice

$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

e subito dopo inserite:

$doc->addStyleSheet('templates/'.$this->template.'/css/custom.css');

Per prima cosa ci servirà un pulsante per aprire e chiudere il menù quando il sito sarà visualizzato su schermi di piccole dimensioni; sempre nel file index.php, subito dopo  il tag body, incollate il seguente codice:

<div class="navbar">
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>
</div>
 

Come potete vedere, dall'attributo data-target del tag a, il framework si aspetta di trovare un menù con la classe nav-collapse, pertanto accedete alla configurazioni dei moduli di Joomla e, nelle impostazioni avanzate del menù top, inserite nel box 'Suffisso classe menù' anche la classe nav-collapse. Attenzione: prestate attenzione di lasciare almeno uno spazio tra i nomi delle varie classi e/o all'inizio della riga, altrimenti la classe non sarà vista.

In alto a sinistra, nell'immagine qui a fianco, potete notare il pulsante di apertura del menù responsive mobile.

Ora dobbiamo fare in modo che i livelli inferiori del menù restino sempre visibili quando il menù verrà aperto,pertanto dobbiamo annullare tutte le opzioni, del css standard che li nascondono. Ovviamente dovremo farlo solo per la visualizzazione in forma compatta.

Incolliamo le seguenti definizioni nel css prima creato:

/*di norma il pulsante del menù è a sinistra */
.navbar .btn-navbar {
    float: left;
}
/* sottolivelli sempre visibili quando si apre il menù */
.navigation .collapse .nav-child {
    display: block;
    float: none;
    position: static;
    top: auto;
    z-index: auto;
}
/* un poco di rientro */
.navigation ul li ul li ul li a{
    padding-left: 30px !important;
}
/* voce attiva in evidenza */
.navigation .current a{
    background-color: #074667;
    color: #fff;
}

La classe collapse inserita nella path css serve appunto a distinguere la visualizzazione con menù collassabile da quella standard.

La modalità corretta, per eseguire questo intervento, sarebbe quella di duplicare il template, in modo che eventuali aggiornamenti non sovrascrivano il lavoro fin qui fatto. Nel caso specifico però interessava focalizzare l'attenzione sull'aspetto mobile della vicenda, visto anche che Protostar ha comunque qualche difettuccio che ne sconsiglia l'uso in siti professionali.

Questa volta abbiamo affrontato un argomento decisamente leggero: la procedura qui descritta e quasi alla portata di tutti; consiglio però un doveroso backup, prima di cimentarsi con la modifica del codice.

Buon lavoro,

marco maria leoni