Member Avatar for janicefernandes

on the site http://www.israeli-weapons.com/index_vehicles.htm, see the "quick menu". I wish to have a similar component, but it should not load a new page when the user clicks on "land vehicles" or "aircraft". instead the table should expand and the sublinks of land vehicles should appear below the main link of land vehicles and the other main links should be shifted down. all this should happen on the same page without loading a new page. i assume this will be made in javascript or flash. have you seen a similar code on any site. please tell me the link. what is the correct term to use for such a component? is such code available for download somewhere ? ask me for any further clarification. thank you in advance for your time and efforts

  • 2 Contributors
  • 2 Replies
  • 111 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by janicefernandes

Dani AI

Generated

Common name: an "accordion" or "collapsible/expandable menu" (sometimes a simple treeview or disclosure widget). Flash is unnecessary and not recommended—this is best done with plain HTML/CSS and a tiny bit of JavaScript so the page does not reload.

As pointed out, attach event handlers rather than always using real navigation links for the top-level toggles. A good, accessible pattern is semantic markup (nav > ul > li), a button to toggle each submenu, and ARIA attributes to communicate state to assistive tech. A minimal example:

<nav>
  <ul class="menu">
    <li class="item">
      <button class="toggle" aria-expanded="false" aria-controls="sub1">Land vehicles</button>
      <ul id="sub1" class="submenu" hidden>
        <li><a href="#tank">Tanks</a></li>
        <li><a href="#apc">APCs</a></li>
      </ul>
    </li>
    <li class="item"><a href="#aircraft">Aircraft</a></li>
  </ul>
</nav>

Toggle logic (vanilla JS):

document.querySelectorAll('.toggle').forEach(btn => {
  btn.addEventListener('click', () => {
    const sub = document.getElementById(btn.getAttribute('aria-controls'));
    const expanded = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!expanded));
    sub.hidden = expanded; // hide when expanded==true
    btn.parentElement.classList.toggle('expanded', !expanded);
  });
});

Styling: hide .submenu by default and show when its parent has .expanded. For smooth animation, transition max-height with overflow:hidden or use a small JS slide helper.

Troubleshooting notes:

  • Use button for toggles (anchors with href will navigate unless preventDefault() is used).
  • For many items use event delegation for performance.
  • Ensure graceful degradation: keep submenu content reachable if JS is disabled (avoid permanently hiding it via server-side markup).
  • Accessibility: maintain aria-expanded and aria-controls and ensure keyboard focus works.
  • Avoid Flash—it is obsolete and not mobile- or SEO-friendly.

A practical next step for is to copy the markup above, try the JS, then refine CSS for the desired visual effect.

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

put an onclick attribute in the menu item, and have it call a JavaScript function that either writes the menu items or unhides them.

Member Avatar for janicefernandes

thanks midimagic. actually i am a newbie. so give me some time to try out what you have said.

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.