Member Avatar for TraderX

Hello all I am trying to find a menu tree that I can use on my vbulletin site in my left column.

I have looked at DHTML Switch Menu I like it but, it doesn't remember what you had open (if you were in a sub folder) when you get to the next page.

I have also looked at HTML_TreeMenu Home I also liked this one (the look) but it doesn't collapse when you click on another folder (like DHTML Switch Menu does).

I would really like to be able to use HTML_TreeMenu Home but I don't know how to get it to collapse when you click on another folder. Could some help me out with it?

  • 3 Contributors
  • 2 Replies
  • 250 Views
  • 7 Years Discussion Span
  • Latest Post Latest Post by HunainHafeez

Dani AI

Generated

A short, practical plan that addresses both requirements raised by and : (1) a left-column tree that collapses other folders like an accordion, and (2) the tree “remembering” what was open after navigating between pages (the example linked by is useful for layout ideas but needs state persistence).

Render the full nested menu server-side (vBulletin templates) so links are normal anchors and search engines see the structure. Enhance that markup with small, unobtrusive JavaScript that:

  • toggles an "open" CSS class on a clicked parent and removes "open" from sibling parents (accordion behavior);
  • saves the identifier(s) of the open node(s) (data-id or an ID) into localStorage so the menu state can be restored after page load; and
  • on DOMContentLoaded, reads the saved id(s) and re-opens those nodes. Storing and retrieving these keys via the Web Storage API is the most reliable client-side option today. (developer.mozilla.org)

A compact example pattern (pseudocode) is helpful to implement and adapt:

document.addEventListener('click', e => {
  const btn = e.target.closest('.menu-toggle');
  if (!btn) return;
  const node = btn.parentElement;
  node.parentElement.querySelectorAll('.open').forEach(n => n.classList.remove('open'));
  node.classList.add('open');
  localStorage.setItem('leftMenuOpen', node.dataset.id);
});
document.addEventListener('DOMContentLoaded', () => {
  const id = localStorage.getItem('leftMenuOpen');
  if (id) document.querySelector(`[data-id="${id}"]`)?.classList.add('open');
});

Use the DOMTokenList API (element.classList) for class toggling for clarity and performance. (developer.mozilla.org)

Accessibility and robustness: follow the ARIA TreeView guidance (use role="tree", role="treeitem", aria-expanded states and keyboard handling) so screen-reader users get predictable behavior; the WAI‑ARIA APG includes navigation and state patterns for tree widgets. (w3.org)

Quick integration tips and gotchas: mark the current page server-side (so ancestors can be expanded on load without JS), feature-detect localStorage and fall back to a cookie or server-side persistence for older/strict privacy modes, ensure scripts run after the menu HTML is present, and give each parent node a stable data-id. These small steps make a left-column tree that behaves like an accordion and reliably remembers state across pages.

Recommended Answers

All 2 Replies

Member Avatar for subduer

Hi,

I'm having the same problem. I've search the web too for a tree menu that remembers which menu you expanded when you open up another page. I've used the "Switch Menu" from Dynamic Drive, it says that it does keep state, but this only works for me in Mozilla and not IE. I really need it to work in IE.

Can any one help?

Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.