offcanvas on cassiopeia, no extensions

[Fallen28]

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

[Per Yngve Berg]

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

[Fallen28]

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

[AMurray]

try this https://www.w3schools.com/howto/howto_js_off-canvas.asp

[Pavel-ww]

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...

[Pavel-ww]

...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 ...

[Pavel-ww]

...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

[Pavel-ww]

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]

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]

...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?

[Pavel-ww]

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

[Fallen28]

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?

[Pavel-ww]

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

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.