< Off-Canvas menu >sub category open & hide

Hi Hyeonjoo,

You can follow steps below:
1) Replace the file skin\frontend\default\jm_megamall\js\off-canvas.js with my attached file
2) Open the css file skin\frontend\default\jm_megamall\css\off-canvas.css, then add the following rules to the end of file:

HTML Code:

 #off-canvas-nav .megamenu .childcontent {
  height: 0;
  margin: 0 !important;
  overflow: hidden;
  transition: height 0.6s ease 0s;
  width: 100% !important;
}
#off-canvas-nav .megamenu .childcontent.active {
  height: auto;
}
[URL=http://www.joomlart.com/forums/usertag.php?do=list&action=hash&hash=jmoffcanvasdim%7Bwidth%3Aauto]#jmoffcanvasdim{width:auto[/URL]background:none repeat scroll 0 0 [URL=http://www.joomlart.com/forums/usertag.php?do=list&action=hash&hash=000000]#000000[/URL]height:100%;left:0;position:absolute;top:0;z-index:98;opacity:0.5;}
.aricon {
  background: url("../images/bg-offcanvas-accodion.png") no-repeat scroll 20px 20px rgba(0, 0, 0, 0);
  cursor: pointer;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  z-index: 10;
}
.off-canvas #off-canvas-nav .jm-mainnav ul.level0 li.haschild.active .aricon {
  background-position: 20px -29px;
}
.off-canvas #off-canvas-nav .jm-mainnav ul.level0 li.haschild {
  position: relative;
}

3)Then save the attached icon to the folder: skin\frontend\default\jm_megamall\images

I hope it helps.

Attachment 33163

Thanks

I changed

1. JS (replaced)
2. CSS (add the codes)
3. put up a image

then
1. It doesnt click menu btn
2. size of top menu has changed
3. jmslideshow has disappeared or might be crash with JM Products Slider.

thank you.
hyeonjoo

Please PM me your url, admin and FTP credentials, I will check it further.

Hello.

I just seen a megamenu extension updated on the 25th Jan.

does it include above condition?

thx

@ auswellbeing,

No, it’s a theme issue and does not relate to megamenu extension.

@ Sherlock Holmes

I updated all files and it doesn’t work.

Can you have a look please?

thx

Could you explain me a little more about "size of topmneu changed" ? Also I need to check this further, so please pm me your admin account, I received the FTP credentials already but not admin account.

sent a admin account and attached a pic of "size of topmneu changed".

Thank you and have a good weekend.

another problem Attachment 34180

It doesn’t click pictures in the product view page.

thx.

You could go to the skin/frontend/default/jm_megamall/js/off-canvas.js file, find and remove the following code:

HTML Code:

  if(offcanvaseffect !== undefined){
            	$('html').addClass(offcanvaseffect);
            }

Let me know how it goes.

You could go to the skin/frontend/default/jm_megamall/js/off-canvas.js file, find and remove the following code:

HTML Code:

  if(offcanvaseffect !== undefined){
            	$('html').addClass(offcanvaseffect);
            }

Let me know how it goes.

this is the file you attached and it doesn’t match anything with your suggestion and there are two similar codes
line 51 and 77.

Thank you for fix error for top menu, product slider and product view.

So far….
off-canvas’s background-color changed "white" ?

/**
*——————————————————————————
* @package T3 Framework for Joomla!
*——————————————————————————
* Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
* s JoomlArt, JoomlaBamboo, (contribute to this project at github
* & Google group to become co-author)
* group: https://groups.google.com/forum/#!forum/t3fw
* url]http://t3-framework.org[/url]
*——————————————————————————
*/

// JavaScript Document

var $ja = jQuery.noConflict();

!function($){
function getIEVersion() {
var rv = -1; // Return value assumes failure.
if (navigator.appName == ‘Microsoft Internet Explorer’) {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.test(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}

var ver = getIEVersion();

if (!ver || ver >= 9 || ver < 0) {

$(document).ready(function(){

jQuery(window).resize (function() {
// hideNav();
// hideNav("right");
})

var $btn = $(‘#jm-mainnav .btn-toggle’),
$nav = null,
$fixeditems = null;

if (!$btn.length) return;

$nav = $(‘<div class="jm-mainnav" />’).appendTo($(‘<div id="off-canvas-nav"></div>’).appendTo($("#jm-wrapper")));

/*
if(offcanvaseffect){
$("#off-canvas-nav").addClass(offcanvaseffect);
}*/

$("#jm-megamenu ul.level0").clone().appendTo($nav);

//add acrcodion feature to has-child menu items
$("#off-canvas-nav div.jm-mainnav ul.level0").children("li.haschild").each(function( i,li){
$(‘<div class="aricon" />’).appendTo($(li));
$(li).children(".aricon").bind("click",function(e) {

cheight = $(this).prev(".childcontent").children(".childcont ent-inner-wrap").height();
e.stopPropagation();
e.preventDefault();
$(this).toggleClass("active");

$(this).parents("li").toggleClass("active");

$(this).prev(".childcontent").toggleClass("active" );
})

});

if(offcanvaseffect){
$(‘html’).addClass(offcanvaseffect);
}
$(‘html’).addClass (‘off-canvas’);

$btn.click (function(e){
if ($(this).data(‘off-canvas’) == ‘show’) {
hideNav();
} else {
showNav();
}

return false;
});

posNav = function () {
var t = $(window).scrollTop();
if (t < $nav.position().top) $nav.css(‘top’, t);
};
posNavRight = function () {
var t = $(window).scrollTop();
if (t < $cart.position().top) $cart.css(‘top’, t);
};

bdHideNav = function (e) {

if($(e.target).attr("id") == "cboxClose"){
return false;
}

e.preventDefault();
hideNav();
return false;
};

showNav = function (side) {

if(jQuery(".cms-home").length){
jQuery("#jm-current-content").height(jQuery(window).height());
}
if(jQuery("#jmoffcanvasdim").length <= 0 && jQuery(window).width() < 984){
jmoverlay = jQuery(‘<div id="jmoffcanvasdim" class="jmoffcanvasdim"></div>’);
jmoverlay.appendTo(‘#ja-wrapper’);
jmoverlay.bind("click",function(e){
bdHideNav(e);
})
}

$("#off-canvas-nav ul.megamenu").children("li.haschild.active").remov eClass("active").children(".aricon").trigger("clic k");

if(side == "right"){

mainwidth = $("#ja-wrapper").width();
mycartwidth = $("#off-canvas-right .jm-mycart").width();
transformwidth = mainwidth + mycartwidth;
transform = "translateX("+transformwidth+"px)";

$("#off-canvas-right .jm-mycart").css({"transform":transform,"-webkit-transform":transform,"-moz-transform":transform,"-o-transform":transform});
$cart.css(‘top’, $(window).scrollTop());
wpfix(1);

setTimeout (function(){
$btncart.data(‘off-canvasright’, ‘show’);
$(‘html’).addClass (‘off-canvasright-enabled’);
$(window).bind(‘scroll touchmove’, posNavRight);

// hide when click on off-canvas-right
$(‘#off-canvas-right’).bind (‘click’, function (e) {
e.stopPropagation();
});

$(‘#off-canvas-right a’).bind (‘click’, hideNav);
$(‘body’).bind (‘click’, bdHideNav);
}, 50);

setTimeout (function(){
wpfix(2);
}, 1000);
}else{
$nav.css(‘top’, $(window).scrollTop());
wpfix(1);

setTimeout (function(){
$btn.data(‘off-canvas’, ‘show’);
$(‘html’).addClass (‘off-canvas-enabled’);
$(window).bind(‘scroll touchmove’, posNav);

// hide when click on off-canvas-nav
$(‘#off-canvas-nav’).bind (‘click’, function (e) {
e.stopPropagation();
});

//$(‘#off-canvas-nav a’).bind (‘click’, hideNav);
$(‘body’).bind (‘click’, bdHideNav);
}, 50);

setTimeout (function(){
wpfix(2);
}, 1000);
}
};

hideNav = function (side) {

if(jQuery("#jmoffcanvasdim").length > 0){
jQuery("#jmoffcanvasdim").remove();
}
$(window).unbind(‘scroll touchmove’, posNav);
$(‘body’).unbind (‘click’, bdHideNav);

$(‘html’).removeClass (‘off-canvas-enabled’);
$btn.data(‘off-canvas’, ‘hide’);
setTimeout (function(){
}, 1000);

};

wpfix = function (step) {
// check if need fixed
if ($fixeditems == -1) return ;// no need to fix
if (!$fixeditems) {
$fixeditems = $(‘body’).children().filter(function(){ return $(this).css(‘position’) === ‘fixed’ });
if (!$fixeditems.length) {
$fixeditems = -1;
return ;
}
}

if (step==1) {
$fixeditems.css({‘position’: ‘absolute’, ‘top’: $(window).scrollTop()+’px’});
} else {
$fixeditems.css({‘position’: ”, ‘top’: ”});
}
}

})
}
}(jQuery);

My apology, open that file, at around line # 77, please remove this code:

HTML Code:

 if(offcanvaseffect){
            	$('html').addClass(offcanvaseffect);
        }

My apology, open that file, at around line # 77, please remove this code:

HTML Code:

 if(offcanvaseffect){
            	$('html').addClass(offcanvaseffect);
        }

Thank you
It works.

Hi, I have a similar problem. The button for the off-canvas menu did not make anything on click. I didn’t make any changes on js files i just add the div next to logo and make some changes on css files.

My site is http://punch.gr/index.php/

I will appreciate any help.
Sandy

When I viewed your site’s sources, I don’t see the skin/frontend/default/jm_megamall/js/off-canvas.js file loaded there, you can check again yourself or pm me the FTP credentials, I will have a closer look.

Ok, so I;m trying to set this up for my JM Hawkstore based website.

I did everything advised, but my child menu items do not become visible on click. Any ideas?

http://h2227189.stratoserver.net

I just had a look and see your off-canvas menus look defffirent from our Jm hawkstore’s off-canvas menu, may I know what modification you did make?

nothing intentional, maybe a couple of css (colours etc) changes. Apart from that, just added the code and files from page 1 here.

It would seem that replacing off-canvas.js with the new file you provided had a massive effect on the menu.

I’ve attached two files:
one showing the menu using the old js

Attachment 35006

and one showing the menu with the new js file you provided.

Attachment 35007

Managed to work it out myself, thanks

Glad that you figured it out.