Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to get collapsible menu in off-canvas?

Featured Lock Resolved Task
First off, a Big thank you for these new awesome templates. I was really impressed with the collapsible menu in off-canvas position of Eventum template.
How can we have this collapsible menu in Resort template?

Your response will add a great value to our project.

Looking forward to hear from you.

Regards
Syed H

7 Answers

Boekiewoekie

More than a month ago #Permalink
pepperstreet wrote:

Hello Syed, thanks for pointing out this nice little feature. I am interested, too.
I just had a quick look into the online demos for comparison. IMHO, there is no special script added, looks like "bootstrap" collapsable feature.

Most likely the needed markup (i.e. CSS classes, data attributes) is added to the Joomla menu module.
So, you might have a look into YourTemplate -> HTML -> mod_menu
There should be some overrides that are responsible for the output and final effect.

Some other things to consider:
Check Eventum template for specific CSS styles for off-canvas menu
Check Menu Module for specific CSS classes in backend. (could not find a related notice in online docs)

Hope this helps.



I got it working!
Download and install Shaper_eventum template on your site. (just the template)
Replace the following files in your current template with the one from the Shaper_eventum template:
Menu.less
menu.php
main.js
And copy this dir (including 3 files):
mod_menu

After this you can modify the custom css in the template for the right colors/backgrounds.
This works for me!

But you can also install the Shaper_eventum template an modify that one. Depents on the ammount of changes you allready made.

regards,
Martin

Syed H

More than a month ago #Permalink
Forgot to attach image of the menu I am looking for, please see attachment.

Attachments (1)

  • 8-26-2015 10-49-35 PM.jpg
    8-26-2015 10-49-35 PM.jpg 38.7 KB

Syed H

More than a month ago #Permalink
Can someone please help me

Boekiewoekie

More than a month ago #Permalink
Hi Syed,

Did you get the collapsible menu in off-canvas position working yet? I'm looking for the same thing....

pepperstreet

More than a month ago #Permalink
Hello Syed, thanks for pointing out this nice little feature. I am interested, too.
I just had a quick look into the online demos for comparison. IMHO, there is no special script added, looks like "bootstrap" collapsable feature.

Most likely the needed markup (i.e. CSS classes, data attributes) is added to the Joomla menu module.
So, you might have a look into YourTemplate -> HTML -> mod_menu
There should be some overrides that are responsible for the output and final effect.

Some other things to consider:
Check Eventum template for specific CSS styles for off-canvas menu
Check Menu Module for specific CSS classes in backend. (could not find a related notice in online docs)

Hope this helps.

Syed H

More than a month ago #Permalink
Boekiewoekie wrote:

pepperstreet wrote:

Hello Syed, thanks for pointing out this nice little feature. I am interested, too.
I just had a quick look into the online demos for comparison. IMHO, there is no special script added, looks like "bootstrap" collapsable feature.

Most likely the needed markup (i.e. CSS classes, data attributes) is added to the Joomla menu module.
So, you might have a look into YourTemplate -> HTML -> mod_menu
There should be some overrides that are responsible for the output and final effect.

Some other things to consider:
Check Eventum template for specific CSS styles for off-canvas menu
Check Menu Module for specific CSS classes in backend. (could not find a related notice in online docs)

Hope this helps.



I got it working!
Download and install Shaper_eventum template on your site. (just the template)
Replace the following files in your current template with the one from the Shaper_eventum template:
Menu.less
menu.php
main.js
And copy this dir (including 3 files):
mod_menu

After this you can modify the custom css in the template for the right colors/backgrounds.
This works for me!

But you can also install the Shaper_eventum template an modify that one. Depents on the ammount of changes you allready made.

regards,
Martin


Here is the Custom CSS that would set it just the way it is in the original template

.offcanvas-menu .offcanvas-inner .sp-module ul > li .offcanvas-menu-toggler .fa-plus {
display: none;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li .offcanvas-menu-toggler.collapsed .fa-minus {
display: none;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li .offcanvas-menu-toggler {
display: inline-block;
position: absolute;
top: 0;
right: 0;
padding: 10px 20px;
cursor: pointer;
color: #333333;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li .offcanvas-menu-toggler .fa-minus {
display: inline;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li .offcanvas-menu-toggler.collapsed .fa-plus {
display: inline;
}


Hope this helps.
Regards
Syed


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 135
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 120
Toufiq

Toufiq

Total Accepted Answers: 65
Pavel

Pavel

Total Accepted Answers: 5
Peter Atkin

Peter Atkin

Total Accepted Answers: 2

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us