Hi.
i want to complete their collapsible menu with their hamburger menu to open an actual offcanvas
This hamburger uses BS Collapse. Therefore, it cannot call BS Offcanvas. You can combine both functionality in one module.
Create an empty php file in the html/mod_menu folder and name it as you like. In my example it is offcanvas2.php.
--
Add following code to this file
Code:
<?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.collapse');HTMLHelper::_('bootstrap.offcanvas');?><nav class="navbar custom-nav navbar-expand-lg" aria-label="<?php echo htmlspecialchars($module->title, ENT_QUOTES, 'UTF-8'); ?>"> <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" 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="collapse navbar-collapse" id="navbar<?php echo $module->id; ?>"> <?php require __DIR__ . '/dropdown-metismenu.php'; ?> </div></nav><button class="btn hamburger" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas<?php echo $module->id; ?>" aria-controls="offcanvas<?php echo $module->id; ?>" aria-label="<?php echo Text::_('MOD_MENU_TOGGLE'); ?>"> <span></span> <span></span> <span></span></button><div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas<?php echo $module->id; ?>" aria-labelledby="<?php echo Text::_('MOD_MENU_TOGGLE'); ?>"> <div class="offcanvas-header"> <h5 class="offcanvas-title">Offcanvas</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <?php require __DIR__ . '/dropdown-metismenu.php'; ?> </div></div>Code:
/*Offcanvas*/.btn.hamburger { display: none; flex-direction: column; justify-content: space-evenly; height: 60px;}.btn.hamburger span { display: block; width: 30px; height: 2px; border-radius: 2px; background-color: #fff;}.offcanvas .mod-menu { flex-direction: column;}.offcanvas .metismenu.mod-menu .mm-toggler,.offcanvas .mod-menu>li>a,.offcanvas .mod-menu>li>span { color: var(--link-color);}@media (max-width: 991.98px) { .btn.hamburger { display: flex; } .navbar.custom-nav { display: none; }}/* */Result--
--
Statistics: Posted by Pavel-ww — Wed May 01, 2024 9:03 am