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
Estensione : php
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
Estensione : php
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
Estensione : css
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!