Advertisement
offcanvas on cassiopeia, no extensions
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
-
- Joomla! Apprentice
- Posts: 7
- Joined: Sat Oct 08, 2022 8:24 pm
offcanvas on cassiopeia, no extensions
i want to manually code offcanvas into cassiopeia as I'm refusing to believe there's a collapsible menu option yet the menu is not coded in, i've seen a video that displays how it's done on a non joomla site, no javascript that i'm aware of, only css and that aria target stuff, i've tried modifying mod_menu files, nothing... any suggestions? i don't think an extension is justified for such a small cosmetic thing
Advertisement
- Per Yngve Berg
- Joomla! Master
- Posts: 31330
- Joined: Mon Oct 27, 2008 9:27 pm
- Location: Romerike, Norway
Re: offcanvas on cassiopeia, no extensions
Are you not satisfied with the Hamburger Menu that is in Cassiopeia?
-
- Joomla! Apprentice
- Posts: 7
- Joined: Sat Oct 08, 2022 8:24 pm
Re: offcanvas on cassiopeia, no extensions
i am, just that 1.) i'd like to change it with a custom button that doesn't use fontawesome, but that's a minor issue.
2.) it's just a placeholder, and i've read that i have to use 3rd party extensions to actually get the functionality, i don't know javascript, and my php knowledge is very limited, i'm kind of learning to code and design websites by experience and tutorials, so i'll understand if stuff won't come my way on a silver platter, if there's any direction anyone can give me i'll be happy to follow
2.) it's just a placeholder, and i've read that i have to use 3rd party extensions to actually get the functionality, i don't know javascript, and my php knowledge is very limited, i'm kind of learning to code and design websites by experience and tutorials, so i'll understand if stuff won't come my way on a silver platter, if there's any direction anyone can give me i'll be happy to follow
- AMurray
- Joomla! Master
- Posts: 10254
- Joined: Sat Feb 13, 2010 7:35 am
- Location: Australia
Re: offcanvas on cassiopeia, no extensions
Regards - A Murray
General Support Moderator
General Support Moderator
- Pavel-ww
- Joomla! Ace
- Posts: 1713
- Joined: Tue Jun 30, 2020 12:17 pm
Re: offcanvas on cassiopeia, no extensions
Hi. Not so difficult.Fallen28 wrote: ↑Mon Apr 29, 2024 6:28 pm i want to manually code offcanvas into cassiopeia as I'm refusing to believe there's a collapsible menu option yet the menu is not coded in, i've seen a video that displays how it's done on a non joomla site, no javascript that i'm aware of, only css and that aria target stuff, i've tried modifying mod_menu files, nothing... any suggestions? i don't think an extension is justified for such a small cosmetic thing
It is only required copy/paste skills and attentiveness
Copy code example from https://getbootstrap.com/docs/5.0/components/offcanvas/ to your desktop HTML editor (Notepad ++, VS Code and ect) --
Remove content from code example like shown on screenshot --
In Cassiopea create menu module override --
You will get some files. Rename (1) to offcanvas.php. Delete all others (2). --
Open offcanvas.php to edit.
Add two lines of code:
Code: Select all
use Joomla\CMS\HTML\HTMLHelper;
HTMLHelper::_('bootstrap.offcanvas');
To be continued...
You do not have the required permissions to view the files attached to this post.
- Pavel-ww
- Joomla! Ace
- Posts: 1713
- Joined: Tue Jun 30, 2020 12:17 pm
Re: offcanvas on cassiopeia, no extensions
...Continuation
Copy this part of code and place it on your site where you want. It is offcanvas call button. --
Copy part of code <ul>...</ul> from offcanvas.php ... --
...and paste it to your HTML editor, into BS code example, inside offcanvas-body DIV. --
Then copy the entire code, except button code, and replace with it the existing <ul>...</ul> part in offcanvas.php
--
The result in the offcanvas.php should be this --
To be continued ...
Copy this part of code and place it on your site where you want. It is offcanvas call button. --
Copy part of code <ul>...</ul> from offcanvas.php ... --
...and paste it to your HTML editor, into BS code example, inside offcanvas-body DIV. --
Then copy the entire code, except button code, and replace with it the existing <ul>...</ul> part in offcanvas.php
--
The result in the offcanvas.php should be this --
To be continued ...
You do not have the required permissions to view the files attached to this post.
- Pavel-ww
- Joomla! Ace
- Posts: 1713
- Joined: Tue Jun 30, 2020 12:17 pm
Re: offcanvas on cassiopeia, no extensions
...Continuation
Create menu module, select offcanvas Layout in module settings and publish in debug position.
Result:
Now you have to stylize everything as you want through CSS.
... The End
Create menu module, select offcanvas Layout in module settings and publish in debug position.
Result:
Now you have to stylize everything as you want through CSS.
... The End
You do not have the required permissions to view the files attached to this post.
- Pavel-ww
- Joomla! Ace
- Posts: 1713
- Joined: Tue Jun 30, 2020 12:17 pm
Re: offcanvas on cassiopeia, no extensions
Hi.Per Yngve Berg wrote: ↑Mon Apr 29, 2024 8:25 pm Are you not satisfied with the Hamburger Menu that is in Cassiopeia?
It is terrible in all respects, both the appearance and the code (difficult for customization).
It is not clear why the developer team did not make offcanvas out of the box.
-
- Joomla! Apprentice
- Posts: 7
- Joined: Sat Oct 08, 2022 8:24 pm
Re: offcanvas on cassiopeia, no extensions
exactly, i understand this CMS is free and i shouldn't complain, it's just annoying, if you've decided to implement a feature, don't leave it incompletePavel-ww wrote: ↑Tue Apr 30, 2024 9:36 amIt is not clear why the developer team did not make offcanvas out of the box.Per Yngve Berg wrote: ↑Mon Apr 29, 2024 8:25 pm Are you not satisfied with the Hamburger Menu that is in Cassiopeia?
-
- Joomla! Apprentice
- Posts: 7
- Joined: Sat Oct 08, 2022 8:24 pm
Re: offcanvas on cassiopeia, no extensions
i want to complete their collapsible menu with their hamburger menu to open an actual offcanvas, if i do everything and add cassiopeia's collapsible menu layout, will it trigger?
also, HUGE HUGE thanks for such a detailed step by step, karma will repay you i promise
edit: i didn't read through, you've basically created a new layout other than collapsible, so basically it is a static button or appears at a certain viewport size?
- Pavel-ww
- Joomla! Ace
- Posts: 1713
- Joined: Tue Jun 30, 2020 12:17 pm
Re: offcanvas on cassiopeia, no extensions
Hi.
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: Select all
<?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: Select all
/*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 --
--
You do not have the required permissions to view the files attached to this post.
-
- Joomla! Apprentice
- Posts: 7
- Joined: Sat Oct 08, 2022 8:24 pm
Re: offcanvas on cassiopeia, no extensions
i can't thank you enough!!!!
where can i learn this? i'd assume learning PHP alone is half the answer, joomla is built on a framework, how do i learn about the framework so i can do this on my own and not mooch more code out of you or other people?
where can i learn this? i'd assume learning PHP alone is half the answer, joomla is built on a framework, how do i learn about the framework so i can do this on my own and not mooch more code out of you or other people?
- Pavel-ww
- Joomla! Ace
- Posts: 1713
- Joined: Tue Jun 30, 2020 12:17 pm
Re: offcanvas on cassiopeia, no extensions
Hi.
For you, all this looks difficult, but in fact it is not as difficult as it seems.
You will be surprised, but my Php / Joomla Framework / Joomla API skills are extremely low (5%).
The basis is HTML/CSS/JS/Bootstrap/browser Dev Tools. This is what you should study in the first place.
In order to do things like in this topic, you only need HTML/CSS/JS/Bootstrap/browser Dev Tools and an understanding of how PHP is integrated into HTML and what it does. Then, armed with simply logic and copy/paste skills, you can easily do it.
To understand how the PHP works inside the HTML and what it does - study the HTML output and compare it with PHP code.
In the screenshot, red is highlighted the default code of the module. Green is highlighted what I added. Studying HTML сode belonging to the default code through the browser Dev Tools, I realized what it does and where I should add it to my code (just copy/paste).
In this example, I determined what it displays a list of menu items.
---
Then, I have copied and inserted it into my code --
And yes, you need to study Joomla documentation and the documentation of your template.
For example, to understand what these lines of code are doing ... ... read this article https://docs-next.joomla.org/docs/exten ... -joomla-4/
No fraud, only the dexterity of the hands
Of course, I described all this a little simplified. Practice will help you immerse yourself in this deeper. I hope this will serve you a good starting point.
You do not have the required permissions to view the files attached to this post.
Advertisement