1. claudevips
  2. Helix (not supported anymore)
  3. Thursday, 07 April 2016
You can have this code in line HELIX 3 ?:


<Span class = "offcanvas-menu-toggler collapsed" data-toggle = "collapse" data-target = "# collapse-menu-603" aria-expanded = "false" aria-controls = "collapse-menu-603"> <i class = "fa fa-plus"> </ i> <i class = "fa fa-minus"> </ i> </ span>

It is present in offcanvas menu shaper_eventum model, see image.

This function is very useful when the project has many menus and submenus.

Thank you very much!
Attachments (1)
Accepted Answer
Accepted Answer Pending Moderation
Rifat Wahid Alif wrote:

Hi,
If you are using helix3 then code should be:

 // Onclick menu item menu list will be hide
var nav_collapse = $('.offcanvas-menu .nav.menu');
nav_collapse.click('li a', function(event) {
event.preventDefault();
offCanvasClose();
});


if still not not then please pm me your joomla admin access i will fix it.

- Thanks






Worked perfectly!

Thank you very much!
Responses (19)
Accepted Answer Pending Moderation
Hi,
Yes you can use it. for make it like this you have to do following steps:

1. paste mod_menu.zip to templates/shaper_revibe/html/.

2. replace this js :
$('#offcanvas-toggler').on('click', function(event){
event.preventDefault();
$('body').addClass('offcanvas');
});

$( '<div class="offcanvas-overlay"></div>' ).insertBefore( '.body-innerwrapper > .offcanvas-menu' );

//$('.offcanvas-menu').append( '<div class="offcanvas-overlay"></div>' );

$('.close-offcanvas, .offcanvas-overlay').on('click', function(event){
event.preventDefault();
$('body').removeClass('offcanvas');
});


insted of

//windowHeight
var windowHeight = $(window).height();
$('.error-page body, .sp-comingsoon body').css('height',windowHeight);

$(window).resize(function(){'use strict',
$('.error-page body, .sp-comingsoon body').css('height',windowHeight);
});

var $body = $('body'),
$wrapper = $('.body-innerwrapper'),
$toggler = $('#offcanvas-toggler'),
$close = $('.close-offcanvas'),
$offCanvas = $('.offcanvas-menu');

$('#offcanvas-toggler').on('click', function(event){
event.preventDefault();
$('body').addClass('offcanvas');
});

$('.close-offcanvas, .offcanvas-overlay').on('click', function(event){
event.preventDefault();
$('body').removeClass('offcanvas');
});

var stopBubble = function (e) {
e.stopPropagation();
return true;
};


3. Replace off canvas less from /templates/shaper_revibe/less/menu.less:



/*=========================================
*======= Off Canvas ============
*=======================================*/

#offcanvas-toggler {
float: right;
line-height: 60px;
>i {
display: inline-block;
padding: 0 0 0 10px;
font-size: 18px;
background: transparent;
border-radius: 3px;
cursor: pointer;
.transition(~'color 400ms, background-color 400ms');
&:hover {
color: #fff;
}
}
}

.offcanvas-overlay {
opacity: 0;
-webkit-transition: all .4s;
transition: all .4s;
}

body.offcanvas {
.offcanvas-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 1;
z-index: 9999;
}
.body-innerwrapper{
right: 320px;
}
}


.close-offcanvas {
position: absolute;
top: 15px;
right: 15px;
z-index: 1;
color: #fff;
border-radius: 100%;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
font-size: 12px;
background: rgba(0, 0, 0, .3);

&:hover {
background: rgba(0, 0, 0, .5);
color:#fff;
}
}

.offcanvas-menu {
width: 320px;
height: 100%;
color: #5f5f5f;
background-color: rgba(255,255,255,0.96);
position: fixed;
top: 0;
opacity: 0;
z-index: 99999;
overflow-y: scroll;

.offcanvas-inner {
padding: 20px;
.sp-module {
margin-top: 20px;

.sp-module-title {
font-size: 16px;
line-height: 1;
text-transform: uppercase;
}

ul {
> li{
border: 0;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
a {
.transition(300ms);
padding:10px 20px;
font-size: 14px;
text-transform: uppercase;
color: #5f5f5f;
font-weight: 500;
line-height: 28px;
&:before{
display: none;
}
}
&:hover, &.active{
>a{
background: rgba(0,0,0,0.15);
color: #2e2e2e;
}
}

.offcanvas-menu-toggler {
display: inline-block;
position: absolute;
top: 0;
right: 0;
padding:13px 20px;
cursor: pointer;
color: #5f5f5f;
.fa-plus {
display: none;
}

.fa-minus {
display: inline;
}

&.collapsed {
.fa-plus {
display: inline;
}
.fa-minus {
display: none;
}
}
}

>a:after {
display: none;
}

ul {
background: rgba(0,0,0,0.02);
>li > a{padding-left: 30px;}
}
}
}

&:first-child {
margin-top: 0;
}
}
.sp-module .sp-module-content > ul {
margin:0 -20px;
}
.search {
margin-top: 25px;
input {
width: 100%;
border-radius: 0;
border: 0;
box-shadow: none;
-webkit-box-shadow: none;
border: 1px solid #999;
}
}
}
}

.ltr {

.offcanvas-menu {
.transition(.4s);
}

.body-innerwrapper:after {
right: 0;
}

.offcanvas-menu {
right: -340px;
}

&.offcanvas {
.offcanvas-menu {
right: 0;
}
}
}

.offcanvas {
width: 100%;
height: 100%;
position: relative;

.body-innerwrapper:after {
width: 100%;
height: 100%;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}

.offcanvas-menu {
opacity: 1;

ul.nav-child li {
padding-left: 10px;
}
}
}

.menu .nav-child.small {
font-size: inherit;
}



- Thanks
Attachments (1)
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 1
Accepted Answer Pending Moderation
Very good.

Doubts:


Step 1 - OK
Step 2 - Where are these files? I did not find any of these lines were mentioned.
Step 3 - OK


The expansion by clicking does not work, I was in doubt in step 2

PS: i'm using kickstart HELIX 3

Thanks a lot for the help.
Attachments (1)
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 2
Accepted Answer Pending Moderation
Rifat Wahid Alif wrote:

Hi,
Yes you can use it. for make it like this you have to do following steps:

1. paste mod_menu.zip to templates/shaper_revibe/html/.

2. replace this js :
$('#offcanvas-toggler').on('click', function(event){
event.preventDefault();
$('body').addClass('offcanvas');
});

$( '<div class="offcanvas-overlay"></div>' ).insertBefore( '.body-innerwrapper > .offcanvas-menu' );

//$('.offcanvas-menu').append( '<div class="offcanvas-overlay"></div>' );

$('.close-offcanvas, .offcanvas-overlay').on('click', function(event){
event.preventDefault();
$('body').removeClass('offcanvas');
});


insted of

//windowHeight
var windowHeight = $(window).height();
$('.error-page body, .sp-comingsoon body').css('height',windowHeight);

$(window).resize(function(){'use strict',
$('.error-page body, .sp-comingsoon body').css('height',windowHeight);
});

var $body = $('body'),
$wrapper = $('.body-innerwrapper'),
$toggler = $('#offcanvas-toggler'),
$close = $('.close-offcanvas'),
$offCanvas = $('.offcanvas-menu');

$('#offcanvas-toggler').on('click', function(event){
event.preventDefault();
$('body').addClass('offcanvas');
});

$('.close-offcanvas, .offcanvas-overlay').on('click', function(event){
event.preventDefault();
$('body').removeClass('offcanvas');
});

var stopBubble = function (e) {
e.stopPropagation();
return true;
};


3. Replace off canvas less from /templates/shaper_revibe/less/menu.less:



/*=========================================
*======= Off Canvas ============
*=======================================*/

#offcanvas-toggler {
float: right;
line-height: 60px;
>i {
display: inline-block;
padding: 0 0 0 10px;
font-size: 18px;
background: transparent;
border-radius: 3px;
cursor: pointer;
.transition(~'color 400ms, background-color 400ms');
&:hover {
color: #fff;
}
}
}

.offcanvas-overlay {
opacity: 0;
-webkit-transition: all .4s;
transition: all .4s;
}

body.offcanvas {
.offcanvas-overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 1;
z-index: 9999;
}
.body-innerwrapper{
right: 320px;
}
}


.close-offcanvas {
position: absolute;
top: 15px;
right: 15px;
z-index: 1;
color: #fff;
border-radius: 100%;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
font-size: 12px;
background: rgba(0, 0, 0, .3);

&:hover {
background: rgba(0, 0, 0, .5);
color:#fff;
}
}

.offcanvas-menu {
width: 320px;
height: 100%;
color: #5f5f5f;
background-color: rgba(255,255,255,0.96);
position: fixed;
top: 0;
opacity: 0;
z-index: 99999;
overflow-y: scroll;

.offcanvas-inner {
padding: 20px;
.sp-module {
margin-top: 20px;

.sp-module-title {
font-size: 16px;
line-height: 1;
text-transform: uppercase;
}

ul {
> li{
border: 0;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
a {
.transition(300ms);
padding:10px 20px;
font-size: 14px;
text-transform: uppercase;
color: #5f5f5f;
font-weight: 500;
line-height: 28px;
&:before{
display: none;
}
}
&:hover, &.active{
>a{
background: rgba(0,0,0,0.15);
color: #2e2e2e;
}
}

.offcanvas-menu-toggler {
display: inline-block;
position: absolute;
top: 0;
right: 0;
padding:13px 20px;
cursor: pointer;
color: #5f5f5f;
.fa-plus {
display: none;
}

.fa-minus {
display: inline;
}

&.collapsed {
.fa-plus {
display: inline;
}
.fa-minus {
display: none;
}
}
}

>a:after {
display: none;
}

ul {
background: rgba(0,0,0,0.02);
>li > a{padding-left: 30px;}
}
}
}

&:first-child {
margin-top: 0;
}
}
.sp-module .sp-module-content > ul {
margin:0 -20px;
}
.search {
margin-top: 25px;
input {
width: 100%;
border-radius: 0;
border: 0;
box-shadow: none;
-webkit-box-shadow: none;
border: 1px solid #999;
}
}
}
}

.ltr {

.offcanvas-menu {
.transition(.4s);
}

.body-innerwrapper:after {
right: 0;
}

.offcanvas-menu {
right: -340px;
}

&.offcanvas {
.offcanvas-menu {
right: 0;
}
}
}

.offcanvas {
width: 100%;
height: 100%;
position: relative;

.body-innerwrapper:after {
width: 100%;
height: 100%;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}

.offcanvas-menu {
opacity: 1;

ul.nav-child li {
padding-left: 10px;
}
}
}

.menu .nav-child.small {
font-size: inherit;
}



- Thanks




Very good.

Doubts:


Step 1 - OK
Step 2 - Where are these files? I did not find any of these lines were mentioned.
Step 3 - OK


The expansion by clicking does not work, I was in doubt in step 2

PS: i'm using kickstart HELIX 3

Thanks a lot for the help.
Attachments (1)
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 3
Accepted Answer Pending Moderation
2. File location is: /templates/shaper_revibe/js/main.js
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 4
Accepted Answer Pending Moderation
Rifat Wahid Alif wrote:

2. File location is: /templates/shaper_revibe/js/main.js



wow, perfect, it worked!

One more question about the menus off canvas.

I am creating "another" project with HELIX 3, onepage.
I noticed a bad detail in a onepage design:

1 - When browsing mobile links are anchors for a given area of the page: OK
2 - By accessing the offcanvas menu and click on a link, the page scrolls to the anchor, but offcanvas menu remains visible, covering the content.

You can do the offcanvas menu disappear after being clicked?

Thank you for extremely attentive support!
Attachments (1)
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 5
Accepted Answer Pending Moderation
One more question about the menus off canvas.

I am creating "another" project with HELIX 3, onepage.
I noticed a bad detail in a onepage design:

1 - When browsing mobile links are anchors for a given area of the page: OK
2 - By accessing the offcanvas menu and click on a link, the page scrolls to the anchor, but offcanvas menu remains visible, covering the content.

You can do the offcanvas menu disappear after being clicked?

Thank you for extremely attentive support!
Attachments (1)
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 6
Accepted Answer Pending Moderation
Rifat Wahid Alif wrote:

Hi,
Please try it: https://www.joomshaper.com/forums/bug-shaper-onepage-mobile-menu-not-collapse-when-clicked#reply-33617

- Thanks





It did not work for me.

I'm using HELIX 3, and turned into onepage through this official tutorial video you:

https://www.youtube.com/watch?v=rPEs_svP7dY

temporary link of my project: http://fabricioventura.com.br/~ruis/

thank you.
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 8
Accepted Answer Pending Moderation
Hi,
If you are using helix3 then code should be:

 // Onclick menu item menu list will be hide
var nav_collapse = $('.offcanvas-menu .nav.menu');
nav_collapse.click('li a', function(event) {
event.preventDefault();
offCanvasClose();
});


if still not not then please pm me your joomla admin access i will fix it.

- Thanks
  1. more than a month ago
  2. Helix (not supported anymore)
  3. # 9
Accepted Answer Pending Moderation
you are always welcome :)
Accepted Answer Pending Moderation
Hi,

Thanks for your pm. Your problem solved. Please check and let us know.

-Thanks
Accepted Answer Pending Moderation
Hi Rifat Wahid Alif,

I have the same thing with mobile devices. only I am using the Helix3 template
Can I also use this solution for helix3?
I don't understand what you mean with "2. replace this js :" Which file do you mean with "this js"?
In Helix3 are allready 3 files:

Default.php, default_component.php and default_url.php

Do I have to overwrite them with the contents of the zip?

thank you!,,
Accepted Answer Pending Moderation
you are always welcome :)
Accepted Answer Pending Moderation
Rop wrote:

Oh sorry I am using the cuisine template!

Hi Rifat Wahid Alif,

I have the same thing with mobile devices. only I am using the cuisine template
Can I also use this solution for the cuisine template?
I don't understand what you mean with "2. replace this js :" Which file do you mean with "this js"?
In Cuisine are allready 3 files:

Default.php, default_component.php and default_url.php

Do I have to overwrite them with the contents of the zip?

thank you!,,
Accepted Answer Pending Moderation
Hi Rifat Wahid Alif.

I don't understand what you mean with "2. replace this js :" Which file do you mean with "this js"?

why do you not answer the question?

you just say : you are always welcome
Accepted Answer Pending Moderation
Hi Rop,
Sorry, I missed it. Anyway you will get js codes in templates/yourtemplate/js/main.js and replace the codes as the instruction.

NB: In latest helix3 is available this feature by default.


- Thanks
Accepted Answer Pending Moderation
Hi Rifat Wahid Alif


NB: In latest helix3 is available this feature by default.
Where is the feature available by default?
Accepted Answer Pending Moderation
Hi,
If you are using helix3 then code should be:

 // Onclick menu item menu list will be hide
var nav_collapse = $('.offcanvas-menu .nav.menu');
nav_collapse.click('li a', function(event) {
event.preventDefault();
offCanvasClose();
});


if still not not then please pm me your joomla admin access i will fix it.

- Thanks


Hi!
Need some help for a follow-up issue with this problem.
I had the same issue with offcanvas menu in Helix 3. But with the code above it was fixed. Thanks for that!

But this code leads also to another issue. The offcanvas menu also closes, if you want to open a submenu item.
What needs to be done to fix that? A function like "offcanvas sub-menus always expanded" would help.

Thanks a lot in advance.

Best regards


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.