Quando si visualizza un sito con Joomla 4.1 su Cassiopeia, sotto una certa risoluzione, in pratica sui schermi dei dispositivi mobili, il menu diventa un'icona, cosiddetto hamburger menu.

Quando si clicca, viene mostrato un menu verticale che sposta giù il contenuto del sito. Questo effetto è poco carino e non in linea con le linee design dei template attuali.

Molti siti professionali utilizzano questo effetto offcanvas quando viene visualizzato sui mobile, in pratica il menu appare dalla parte sinistra, in una finestra popup, e copre una parte del contenuto senza spostarlo.

Per implementare questa funzionalità in Joomla 4.1 su Cassiopeia, ci ha pensato Viviana Menzel (opens in a new tab), uno dei sviluppatori attivi di Joomla! creando nuovi layout.


Nella speranza che questo codice va inserito nelle versioni future di Joomla! 4.1, con pocchi semplici passaggi si può avere questo effetto fin da subito. Ed ecco i passaggi su come procedere.

Passo 1
Creazione del file offcanvas-metismenu.php per il nuovo layout.
Dal pannello di amministrazione di Joomla selezionare:
Sistema > Template del Sito > Cassiopeia dettagli e File > html > mod_menu > Nuovo file

Inserire il seguente codice:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   (C) 2021 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

HTMLHelper::_('bootstrap.offcanvas');
?>

<nav class="navbar navbar-expand-lg">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbar<?php echo $module->id; ?>" aria-controls="navbar<?php echo $module->id; ?>" aria-expanded="false" aria-label="<?php echo Text::_('MOD_MENU_TOGGLE'); ?>">
        <span class="icon-menu" aria-hidden="true"></span>
    </button>
    <div class="offcanvas offcanvas-start" id="navbar<?php echo $module->id; ?>">
        <div class="offcanvas-header">
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <?php require __DIR__ . '/dropdown-metismenu.php'; ?>
        </div>
    </div>
</nav>

Passo 2
Creazione del file offcanvas.php per il nuovo layout.
Sistema > Template del Sito > Cassiopeia dettagli e File > html > mod_menu > Nuovo file

Inserire il seguente codice:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_menu
 *
 * @copyright   (C) 2021 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

HTMLHelper::_('bootstrap.offcanvas');
?>

<nav class="navbar navbar-expand-lg">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbar<?php echo $module->id; ?>" aria-controls="navbar<?php echo $module->id; ?>" aria-expanded="false" aria-label="<?php echo Text::_('MOD_MENU_TOGGLE'); ?>">
        <span class="icon-menu" aria-hidden="true"></span>
    </button>
    <div class="offcanvas offcanvas-start" id="navbar<?php echo $module->id; ?>">
        <div class="offcanvas-header">
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <?php require 'modules/mod_menu/tmpl/default.php'; ?>
        </div>
    </div>
</nav>

Passo 3
Una volta creati i 2 layout bisogna applicare dei stili quindi si passa alla creazione del file user.css .
Selezionare quindi: Sistema > Template del Sito > Cassiopeia dettagli e File > css > Nuovo file

Se il file user.css e stato creato in precedenza per altre personalizzazioni, allora dovete solamente aprirlo e inserire alla fine il seguente codice.

.offcanvas.show {
  background-color: var(--cassiopeia-color-primary);
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
}
@media (min-width: 992px) {
  .offcanvas-start {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .offcanvas .metismenu.mod-menu .metismenu-item > ul {
    position: relative;
    width: 100%;
    margin-top: 1rem;
  }
  .offcanvas .metismenu.mod-menu .mm-collapse {
    background-color: transparent;
  }
  .offcanvas .metismenu.mod-menu .metismenu-item > a {
    color: #fff;
  }
}
.offcanvas-header > *:only-child {
  margin-left: auto;
}

Ovviamente, potete fare le vostre personalizzazioni cambiando lo sfondo oppure anche il colore del testo.

Passo 4
Non ci resta che aplicare il layout desiderato al nostro modulo, quindi:

Contenuti > Moduli del sito > Menu principale > Avanzate
Nel campo layout adesso vedrete altri due layout:

• offcanvas-metismenu
• offcanvas

Selezionare quello desiderato e poi Salva e Chiudi.

Buon Joomla!