Member Avatar for mdgiv203

i am returning website designer haven't been doing much websites for the past 3 years. i recently learned about AJAX and some of the things it can do. i'm basically interested on learning how to make DHTML dropdown menus. and exmpla is on the link below. IS THIS SOMETHING DONE WITH AJAX? Or something we can just do in plan javascript or CSS?

http://dhtml-menu.com/menu/

check the navbar.

thanks!

  • 2 Contributors
  • 2 Replies
  • 86 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mdgiv203

Dani AI

Generated

returned to web design and asked whether DHTML dropdowns require AJAX. As noted, AJAX can be used but is not required. A common, robust approach is semantic HTML for structure, CSS for visual states and transitions, and small JavaScript to toggle an "open" state, manage focus, and handle keyboard input. Use AJAX only when menu items must be loaded from the server at runtime.

A minimal pattern (structure + behavior):

<nav aria-label="Main">
  <ul class="menu">
    <li class="has-sub">
      <a href="#" aria-haspopup="true" aria-expanded="false">Products</a>
      <ul class="submenu" hidden>
        <li><a href="/p1">Product 1</a></li>
        <li><a href="/p2">Product 2</a></li>
      </ul>
    </li>
  </ul>
</nav>
document.querySelectorAll('.has-sub > a').forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault();
    const li = e.currentTarget.parentElement;
    const sub = li.querySelector('.submenu');
    const open = li.classList.toggle('open');
    sub.hidden = !open;
    e.currentTarget.setAttribute('aria-expanded', String(open));
  });
});

document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    document.querySelectorAll('.has-sub.open').forEach(li => {
      li.classList.remove('open');
      li.querySelector('.submenu').hidden = true;
      const a = li.querySelector('a[aria-expanded]');
      if (a) a.setAttribute('aria-expanded', 'false');
    });
  }
});

Notes and quick tips: prefer animating opacity/transform rather than display for smooth transitions; treat hover as progressive enhancement (provide click/touch handlers for mobile); add proper ARIA attributes and keyboard navigation per the WAI-ARIA patterns. Useful references: Element.classList on MDN (classList) and the WAI-ARIA Authoring Practices menu-button pattern (WAI-ARIA APG menu-button).

Recommended Answers

All 2 Replies

Member Avatar for mdgiv203

Thanks, for the link. I would want to start on Javascript side of it first. anyone know resources on how to achieve this navbar?

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.