Advertisement

offcanvas on cassiopeia, no extensions

Everything to do with Joomla! 4.x templates and templating.

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.
Post Reply
Fallen28
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Sat Oct 08, 2022 8:24 pm

offcanvas on cassiopeia, no extensions

Post by Fallen28 » 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

Advertisement
User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 31330
Joined: Mon Oct 27, 2008 9:27 pm
Location: Romerike, Norway

Re: offcanvas on cassiopeia, no extensions

Post by Per Yngve Berg » Mon Apr 29, 2024 8:25 pm

Are you not satisfied with the Hamburger Menu that is in Cassiopeia?

Fallen28
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Sat Oct 08, 2022 8:24 pm

Re: offcanvas on cassiopeia, no extensions

Post by Fallen28 » Mon Apr 29, 2024 8:47 pm

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

User avatar
AMurray
Joomla! Master
Joomla! Master
Posts: 10254
Joined: Sat Feb 13, 2010 7:35 am
Location: Australia

Re: offcanvas on cassiopeia, no extensions

Post by AMurray » Mon Apr 29, 2024 9:11 pm

Regards - A Murray
General Support Moderator

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1713
Joined: Tue Jun 30, 2020 12:17 pm

Re: offcanvas on cassiopeia, no extensions

Post by Pavel-ww » Tue Apr 30, 2024 8:42 am

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
Hi. Not so difficult.
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)
3.jpg
--

Remove content from code example like shown on screenshot
4.jpg
--

In Cassiopea create menu module override
5.jpg
--

You will get some files. Rename (1) to offcanvas.php. Delete all others (2).
1.jpg
--

Open offcanvas.php to edit.
Add two lines of code:

Code: Select all

use Joomla\CMS\HTML\HTMLHelper;

HTMLHelper::_('bootstrap.offcanvas');
2.jpg
--

To be continued... :)
You do not have the required permissions to view the files attached to this post.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1713
Joined: Tue Jun 30, 2020 12:17 pm

Re: offcanvas on cassiopeia, no extensions

Post by Pavel-ww » Tue Apr 30, 2024 9:08 am

...Continuation :)

Copy this part of code and place it on your site where you want. It is offcanvas call button.
1.jpg
--

Copy part of code <ul>...</ul> from offcanvas.php ...
2.jpg
--
...and paste it to your HTML editor, into BS code example, inside offcanvas-body DIV.
3.jpg
--
Then copy the entire code, except button code, and replace with it the existing <ul>...</ul> part in offcanvas.php
4.jpg
--

The result in the offcanvas.php should be this
5.jpg
--

To be continued ... :)
You do not have the required permissions to view the files attached to this post.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1713
Joined: Tue Jun 30, 2020 12:17 pm

Re: offcanvas on cassiopeia, no extensions

Post by Pavel-ww » Tue Apr 30, 2024 9:14 am

...Continuation :)

Create menu module, select offcanvas Layout in module settings and publish in debug position.

Result:
1.jpg
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.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1713
Joined: Tue Jun 30, 2020 12:17 pm

Re: offcanvas on cassiopeia, no extensions

Post by Pavel-ww » Tue Apr 30, 2024 9:36 am

Per Yngve Berg wrote: Mon Apr 29, 2024 8:25 pm Are you not satisfied with the Hamburger Menu that is in Cassiopeia?
Hi.

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.

Fallen28
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Sat Oct 08, 2022 8:24 pm

Re: offcanvas on cassiopeia, no extensions

Post by Fallen28 » Tue Apr 30, 2024 3:57 pm

Pavel-ww wrote: Tue Apr 30, 2024 9:36 am
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 not clear why the developer team did not make offcanvas out of the box.
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 incomplete

Fallen28
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Sat Oct 08, 2022 8:24 pm

Re: offcanvas on cassiopeia, no extensions

Post by Fallen28 » Tue Apr 30, 2024 4:10 pm

Pavel-ww wrote: Tue Apr 30, 2024 9:08 am ...Continuation :)

Copy this part of code and place it on your site where you want. It is offcanvas call button.
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?

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1713
Joined: Tue Jun 30, 2020 12:17 pm

Re: offcanvas on cassiopeia, no extensions

Post by Pavel-ww » Wed May 01, 2024 9:03 am

Fallen28 wrote: Tue Apr 30, 2024 4:10 pm
i want to complete their collapsible menu with their hamburger menu to open an actual offcanvas
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.
1.jpg
--
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>

Add CSS to user.css file

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;
    }
}
/*  */
Create new menu module, select offcanvas2 (in my example) layout, publish in menu position.

Result
4.jpg
--
2.jpg
--
3.jpg
You do not have the required permissions to view the files attached to this post.

Fallen28
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Sat Oct 08, 2022 8:24 pm

Re: offcanvas on cassiopeia, no extensions

Post by Fallen28 » Thu May 02, 2024 6:57 pm

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?

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1713
Joined: Tue Jun 30, 2020 12:17 pm

Re: offcanvas on cassiopeia, no extensions

Post by Pavel-ww » Fri May 03, 2024 7:52 am

Fallen28 wrote: Thu May 02, 2024 6:57 pm 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?
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.
1.jpg
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.
2.jpg
---

Then, I have copied and inserted it into my code
3.jpg
--

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 ...
4.jpg
... read this article https://docs-next.joomla.org/docs/exten ... -joomla-4/

No fraud, only the dexterity of the hands :D

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

Post Reply

Return to “Templates for Joomla! 4.x”