Click-Show-Hide Menu Loading

[MortalWombat]

Hi

I have the click-show-hide menu addon installed, but I was hoping someone here could help me with a couple of things...

It has an option to prevent the page loading to show the category you open (I have this set to on), but it seems to only work with the top categories and not any of the subcategories when they have sub's of their own.

My site is here: http://www.mortalwombat.com.au/shop/...php?main_page=

If you open 'a category' it doesn't load the category, but if you click 'b category' it does. I want it to only load the bottom level of categories - in this case 'c category'.

Does anyone know how I can stop it from loading any of the categories that have subcategories in them?

Also (I'm not sure if this is caused because of the click-show-hide menu, or something else), in IE the whole sidebar drops down to beneath the content because the margin is overlapping the sidebar.

I'm not sure what to look at changing to fix this... Any thoughts?

You can see what it's doing here: http://www.mortalwombat.com.au/shop/...&products_id=2

Thanks in advance,
Tija

[MortalWombat]

I haven't had any luck with fixing this as yet... I'm happy to offer anyone a cup of coffee who might be able to help me with it.

- Tija

[DBB1]

I haven't had any luck with fixing this as yet... I'm happy to offer anyone a cup of coffee who might be able to help me with it.

- Tija

Tija,

I'm struggling with it, too, but in a different manner:

- If I'm on one of the sub-category pages, I'd like to be able to click on the top-level main category menu link to return to that level. But it seems once you've drilled down to a sub-cat, not even the HOME Main Page link resets the menus; you're stuck at the sub-cat until you click your way back up using another category.

- I also wanted this to be more dynamic, so as to expose the sub-categories with a mouseover event, instead of having to click your way down. The contribution doesn't use the Categories Separator, so a visitor would have no way of knowing if sub-cats exist without clicking each one.

I don't think this contribution is supported, as I haven't seen any replies by the author in a long time...

So it appears that there is no vertical equivalent of the CSS Flyout Menu Contribution (which works great, by the way, but it just doesn't look right when it extends out over a slideshow...).

-DBB

[MortalWombat]

I agree, DBB - the CSS Flyout Menu is great, but it's just not suitable for all stores.

I have had a look at a couple of other menu addons available, and the Click-Show-Hide menu is byfar the best for my purpose. It's just unfortunate that there's no one to keep it updated.

- Tija

[jabbawest]

I have a modified jquery version of this.
It looks great and you can see it here
http://minu.me/2sm4
and download it from here.
http://sterlingleafjewelry.com/SLJdo...clicknshow.zip

But I have one issue.
If I click on a Category>Rings>click to view a ring and>click back on the Rings Category in the menu, it won't take me back to the Top of the category.

Any ideas?

Thanks,
Stephen

[MortalWombat]

If I click on a Category>Rings>click to view a ring and>click back on the Rings Category in the menu, it won't take me back to the Top of the category.

Any ideas?

Thanks,
Stephen

This is caused by an option you can find in Admin>Configuration>Layout Settings.

If you find the option "Skip 1-prod Categories" and set it to false, you will no longer be brought straight back to the item.

Hope this helps :)

- Tija

[jabbawest]

I happen to stumble upon a jquery version of the Click Show Hide Category Menu available in the ZC Addon a few weeks ago.
I have a couple of things that I could use some help with.
If you go here http://minu.me/2wq5
and click on a category, then click on a sub category, you cannot return to the top category by clicking on it.

Secondly, if you click on a subcategory, then click on an item, you cannot return to the top or sub category within that cat. Other categories and their subs can be open, just not the one you are browsing.

The categories_css.js handles all of this and I haven't a clue as to what to amend, turn off, or turn on for this to work properly.
Other than that, it looks good and works.
PM me if you'd like a copy.

<!--
/*
 * DO NOT REMOVE THIS NOTICE
 *
 * PROJECT:   mygosuMenu
 * VERSION:   1.2.0b
 * COPYRIGHT: (c) 2003,2004 Cezary Tomczak
 * LINK:    http://gosu.pl/dhtml/mygosumenu.html
 * LICENSE:   BSD (revised)
 *
 * MODIFIED:  2007,2008 Cameron Clark
 * CHANGES:   1) Close all other nodes when a new node is clicked
 *            2) Remembers current open node with a cookie
 *            3) Immediately assigns class of "on" to clicked menu item, removing from all other items
 *            4) Uses blur() to remove dotted outline from clicked links
 *            5) Allows option to make parent links either just show submenus, or also open corresponding pages
 */

function TreeMenu(id, openParentPages) {

  this.init = function() {
    if (!document.getElementById(this.id)) {
      return;
      }
    document.getElementById(this.id).className = "tree-menu";  // change class name to invoke tree menu styles
    this.parse(document.getElementById(this.id).childNodes, this.tree, this.id, 0);
    this.load();
    addDOMEvent(window,'unload',function(e) { self.save(); },false);
    }

  this.parse = function(nodes, tree, id, depth) {
    var a, lastLi;
    for (var i = 0; i < nodes.length; i++) {
      if (nodes[i].nodeType != 1) {
        continue;
        }
      if (nodes[i].tagName.toLowerCase() == "li") {
        lastLi = nodes[i];
        nodes[i].id = id + "-" + tree.length;
        tree[tree.length] = new Array();
        if (a = this.getA(nodes[i].childNodes)) {
          a.id = nodes[i].id + "-a";
          if (hasClassName(a,"on")) {
            this.id_activenode = nodes[i].id;
            }
          }
        if (nodes[i].childNodes && this.hasUl(nodes[i].childNodes)) {
          nodes[i].className = (depth == 0) ? "top-section" : "section";
          if (a) {
            if (depth == 0) {
              if (this.openParentPages) // enable links on parent items (links to parent category pages work)
                eval("document.getElementById('"+a.id+"').onclick = function() {this.blur(); self.setActive(this); return self.click('"+nodes[i].id+"');}");
              else                     // disable links on parent items (so clicking them just opens submenus, not the page)
                eval("document.getElementById('"+a.id+"').onclick = function() {this.blur(); self.click('"+nodes[i].id+"'); return false;}");
              }
            else
              eval("document.getElementById('"+a.id+"').onclick = function() {this.blur(); self.setActive(this); return self.click('"+nodes[i].id+"');}");
            }
          }
        else {
          nodes[i].className = (depth == 0) ? "top-item" : "item";
          if (a) {
            if (depth == 0) {
              a.id = nodes[i].id + "-a";
              eval("document.getElementById('"+a.id+"').onclick = function() {this.blur(); self.closeAll('"+nodes[i].id+"'); self.setActive(this); return true;}");
              }
            else {
              eval("document.getElementById('"+a.id+"').onclick = function() {this.blur(); self.setActive(this); return true;}");
              }
            }
          }
        }
      if (nodes[i].tagName.toLowerCase() == "ul") {
        nodes[i].style.display = "none";
        id = id + "-" + (tree.length - 1);
        nodes[i].id = id + "-section";
        tree = tree[tree.length - 1];
        }
      if (nodes[i].childNodes) {
        this.parse(nodes[i].childNodes, tree, id, depth+1); // run recursively through menu tree
        }
      }
    if (lastLi) {
      lastLi.className = lastLi.className + "-end";
      }
    }

  this.hasUl = function(nodes) {
    for (var i = 0; i < nodes.length; i++) {
      if (nodes[i].nodeType != 1) {
        continue;
        }
      if (nodes[i].tagName.toLowerCase() == "ul") {
        return true;
        }
      if (nodes[i].childNodes) {
        if (this.hasUl(nodes[i].childNodes)) {
          return true;
          }
        }
      }
    return false;
    }

  this.getA = function(nodes) {
    for (var i = 0; i < nodes.length; i++) {
      if (nodes[i].nodeType == 1) {
        if (nodes[i].tagName.toLowerCase() == "a") {
          return nodes[i];
          }
        return false;
        }
      }
    }

  this.setActive = function(a) {
    var links = document.getElementById(this.id).getElementsByTagName("A");
    for (var i = 0; i < links.length; i++) {
      links[i].className = '';
      }
    a.className = "on";
    }
  
  this.click = function(id) {
    childList = document.getElementById(id + "-section");
    if (childList) {
      if (childList.style.display == "none") {
        this.show(id);
        this.hideOthers(document.getElementById(this.id).childNodes,id); // pass top-level menu object to start recursion
        this.id_opennode = id;                                           // set current node for saving in cookie
        return true;
        }
      else {
        this.hide(id);
        this.id_opennode = (id.split("-").length > 2) ? id.substr(0,id.lastIndexOf("-")) : ""; // set parent node, or if at top level, set to no id, for saving in cookie
        return false;
        }
      }
    }

  this.show = function(id) {
    childList  = document.getElementById(id + "-section");
    parentItem = document.getElementById(id);
    if (childList) {
      childList.style.display = "";
      parentItem.className = parentItem.className.replace(/section(-open)?/, "section-open");
      }
    }

  this.hide = function(id) {
    childList  = document.getElementById(id + "-section");
    parentItem = document.getElementById(id);
    if (childList) {
      childList.style.display = "none";
      parentItem.className = parentItem.className.replace(/section(-open)?/, "section");
      }
    }

  // runs through child nodes recursively to hide all but current node and its parents
  this.hideOthers = function(nodes,id) {
    for (var i = 0; i < nodes.length; i++) {
      if (nodes[i].nodeType == 1 && nodes[i].tagName.toLowerCase() == "li") { // find all child <li> elements
        childList = document.getElementById(nodes[i].id + "-section");
        if (childList) {
          if (id.indexOf(nodes[i].id) == -1) {  // if this is not the current node or one of its parents, hide it
            this.hide(nodes[i].id);
            }
          if (id != nodes[i].id && childList.childNodes) {  // if this is not the current node and it has child nodes, run this function recursively to hide them
            this.hideOthers(childList.childNodes,id);
            }
          }
        }
      }
    }

  this.closeAll = function(id) {
    this.hideOthers(document.getElementById(this.id).childNodes,'');
    this.id_opennode = '';
    }

  this.showParents = function(id) { // Note that this will work backwards from closest to farthest ancestor nodes
    var idPieces = id.split("-");
    var depth = idPieces.length-2;
    for (var p = 0; p < depth; p++) {
      idPieces.pop();
      this.show(idPieces.join("-"))
      }
    }

  this.save = function() {
    if (this.id_opennode) {
      this.cookie.set(this.id, this.id_opennode);
      }
    else {
      this.cookie.del(this.id);
      }
    }

  this.load = function() {
    var id_savednode = this.cookie.get(this.id);
    if (this.id_activenode) {
      this.id_opennode = this.id_activenode;
      }
    else if (id_savednode) {
      this.id_opennode = id_savednode;
      }
    if (this.id_opennode) {
      this.showParents(this.id_opennode);
      this.show(this.id_opennode);
      }
    }

  function Cookie() {
    this.get = function(name) {
      var cookies = document.cookie.split(";");
      for (var i = 0; i < cookies.length; i++) {
        var a = cookies[i].split("=");
        if (a.length == 2) {
          a[0] = a[0].trim();
          a[1] = a[1].trim();
          if (a[0] == name) {
            return unescape(a[1]);
            }
          }
        }
      return "";
      }
    this.set = function(name, value) {
      var date = new Date();
      date.setTime(date.getTime()+(24*60*60*1000)); // save for 1 day
      document.cookie = name + "=" + escape(value) + "; expires=" + date.toGMTString() + "; path=/";
      }
    this.del = function(name) {
      document.cookie = name + "=; expires=Thu, 01-Jan-70 00:00:01 GMT; path=/";
      }
    }

  var self = this;
  this.id = id;
  this.openParentPages = openParentPages;
  this.tree = new Array();
  this.cookie = new Cookie();
  this.init();
  }

// Define trim function
if (typeof String.prototype.trim == "undefined") {
  String.prototype.trim = function() {
    var s = this.replace(/^\s*/, "");
    return s.replace(/\s*$/, "");
    }
  }

// Load menu immediately
new TreeMenu('siteMenu',1);

// Iterates through all class names for an object and returns true if specified class name is found
function hasClassName(obj, className) {
  if (obj && obj.className) {
    var objClass = obj.className.trim();
    arrClasses = objClass.split(" ");
    for (var c=0; c<arrClasses.length; c++) {
      if (className == arrClasses[c])
        return true;
      }
    }
  return false;
  }

// For adding new events to any object (like preloads in tpl_categories_css.php)
function addDOMEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
    }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
    }
  else {
    elm['on' + evType] = fn;
    }
  }

// Accept any number of image sources for preloadings (separate with commas)
function preloadImages() {
  if (document.images) {
    if (!document.preloads)
      document.preloads = new Array();
    var i, j, p = document.preloads.length, a = preloadImages.arguments;
    // Check to see if the preload already exists in the array, and if so, exit function
    for (i=0; i<p; i++) {
      for (j=0; j<a.length; j++) {
        if (document.preloads[i].src == a[j])
          return;
        }
      }
    // Add preload to array
    for (j=0; j<a.length; j++) {
      document.preloads[p]       = new Image;
      document.preloads[p++].src = a[j];
      }
    }
  }
// --> 

[richphitzwell]

Have you tried to comment "//" the else statement after
// disable links on parent items (so clicking them just opens submenus, not the page)

[jabbawest]

Have you tried to comment "//" the else statement after
// disable links on parent items (so clicking them just opens submenus, not the page)

That, and a few else statement around there.
Using Firebug points me to lines 124-139 but again, I'm not sure what to change.
Still picking at it, which I've been doing on and off for a few weeks.

this.click = function(id) {
    childList = document.getElementById(id + "-section");
    if (childList) {
      if (childList.style.display == "none") {
        this.show(id);
        this.hideOthers(document.getElementById(this.id).childNodes,id); // pass top-level menu object to start recursion
        this.id_opennode = id;                                           // set current node for saving in cookie
        return true;
        }
      else {
        this.hide(id);
        this.id_opennode = (id.split("-").length > 2) ? id.substr(0,id.lastIndexOf("-")) : ""; // set parent node, or if at top level, set to no id, for saving in cookie
        return false;
        }
      }
    } 

[richphitzwell]

It would be best to contact the creator. Dr. Byte is active on here and he is given credit for part of the code at least or try the contact from the screen shot http://www.prolifique.com

http://www.prolifique.com/zencart/cl...screenshot.jpg