-
-
Save drmenzelit/152a1954d73bcbe126194965e43c97f4 to your computer and use it in GitHub Desktop.
<?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> |
.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; | |
} |
@ianpanorton ok, I got it... you need to add the classes
d-flex d-sm-none
to the nav element, that will make it visible only on small devices.
https://getbootstrap.com/docs/5.3/utilities/display/
I've got it now as well :-) Many thanks for your help Viviana...
@leetempest @mariantanase @TLWebdesign @woluweb @ianpanorton @robertaricci @fontanil @monicastewart
Thank you all for your questions and ideas. Now there is an improved version of the offcanvas menu with a little bit of explanation on my blog: https://www.dr-menzel-it.de/blog/offcanvas-menue-fuer-cassiopeia
It is in German, but I think a translation tool will help ;-)
Hi,
I'm using this code (and now the code on the blog page) and I have a problem with a vertical menu (sidebar-left).
I change the grid in the user.css to display the sidebar-left above the main component section. All works.
But once the content of the offcanvas is displayed, a click on a link opens the right page but don't close the menu. Is it a way to automatically close it? (the main menu in "menu" position closes well)
Thanks in advance!
Sorry,
It's a conflict with a JS script added in the index.php of the child template.
Removing the script solved the problem.
I hope the author of that script will find a solution.
Thank you for the code. It is very useful. Is there a way to insert my site's logo at the center top of your offcanvas menu and to wrap the wording of the sub-menu items that are currently flowing out offscreen on the right side of the container:
I do not want to make my offcanvas menu wider than the 66% screen width that it currently is.
Thank you for the code. It is very useful. Is there a way to insert my site's logo at the center top of your offcanvas menu and to wrap the wording of the sub-menu items that are currently flowing out offscreen on the right side of the container:
I do not want to make my offcanvas menu wider than the 66% screen width that it currently is.
Please check the last version of the offcanvas: https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4?permalink_comment_id=4529752#gistcomment-4529752
Check line-break or other possibilities in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/line-break
Thank you for your off canvas menu code (using offcanvas.php) it works great! On the full screen I use this CSS to add an underline to active menu Item (/* Underline active Menu Item */ .container-header .mod-list li.active > a { text-decoration: underline #7ed956 3px; }
But I am unable to get it to work on the off canvas menu?
Any suggestions are appreciated. Thanks.
@JoomlaRookie you should check with the browser inspector (F12) the specificity of your css definition, probably it is something else overwriting it.
After using FireFox web development tools I could find no errors in my CSS that would cause the underline to active menu item not to appear on mobile devices.
Full Screen image:
Firefox Responsive Design Image:
And screenshot of menu on iPhone 12 iso 17.4:
No text decoration on iPhone. Any suggestions are appreciated. Thanks.
I was able to create a way of highlighting the active menu item by adding this to user.css:
@media (max-width: 991.98px){li.nav-item.current.active {color:#7ed956;} }
This allows offcanvas menu to change active link to different color and does not interfere with menu display on larger displays greater than 991.98px.
@ianpanorton ok, I got it... you need to add the classes
d-flex d-sm-none
to the nav element, that will make it visible only on small devices.https://getbootstrap.com/docs/5.3/utilities/display/