Member Avatar for samertaha

hi , i am searching for a good tree menu design for products categories to use it in my website ,
i need it to be flexible so i could style it as needed and also simple so i can target it with my own javascript.
thanks again.

  • 2 Contributors
  • 2 Replies
  • 239 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by samertaha

Dani AI

Generated

asked for a flexible, styleable vertical tree for product categories and to keep it easy to target with JavaScript. 's pointer to cssmenu.com is a quick CSS-only route, but for a production product catalog the most robust pattern is semantic HTML + minimal JS so styles, accessibility, and dynamic loading stay simple and predictable.

A practical markup pattern (keeps styling simple and JS-targetable):

<ul role="tree" id="category-tree">
  <li role="treeitem" aria-expanded="false" data-id="42">
    <div class="node-title">Electronics</div>
    <ul role="group">
      <li role="treeitem" data-id="43">Phones</li>
      <li role="treeitem" data-id="44">Cameras</li>
    </ul>
  </li>
  <li role="treeitem" data-id="50">Books</li>
</ul>

Then toggle state with a tiny listener that updates aria-expanded and a class for styling:

document.getElementById('category-tree').addEventListener('click', e => {
  const item = e.target.closest('[role="treeitem"]');
  if (!item || !item.hasAttribute('aria-expanded')) return;
  const open = item.getAttribute('aria-expanded') === 'true';
  item.setAttribute('aria-expanded', String(!open));
  item.classList.toggle('is-open', !open);
});

Use ARIA roles and keyboard behavior from the WAI-ARIA Tree pattern (arrow keys, Home/End, selection model) and keep aria-expanded only on parent nodes so assistive tech reports state correctly. Test focus order and screen-reader announcements while developing. Tree view pattern (WAI-ARIA APG). (w3.org) aria-expanded (MDN). (developer.mozilla.org)

For feature needs (lazy loading, big trees, search, drag/drop) consider mature plugins rather than rebuilding everything: jsTree (lightweight, configurable) or Fancytree (feature-rich, supports lazy load and keyboard). If only a visual, purely-CSS menu is required, cssmenu.com (mentioned by ) is fine as a quick demo, but it will not handle accessibility or large-dataset concerns as cleanly as a semantic tree + small JS. jsTree docs. (jstree.com) Fancytree (GitHub). (github.com)

Recommended Answers

All 2 Replies

Member Avatar for almostbob

cssmenu.com may have what you want

Member Avatar for samertaha

great 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.