Member Avatar for wilko1995

Hi, How would i go about creating a menu like the one that this website has?

http://oas.com.au

  • 3 Contributors
  • 2 Replies
  • 105 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

Short answer: the effect is a horizontal accordion. already named the pattern and was right to suggest checking the site source, but a modern, robust way is semantic HTML + CSS flexbox for layout, a small JS toggle for expand/collapse, and ARIA/keyboard support for accessibility.

A minimal implementation pattern (structure, styles, and behavior):

<!-- HTML -->
<nav class="h-acc" aria-label="Main menu">
  <ul>
    <li class="panel" tabindex="0" aria-expanded="false">
      <a href="#">Item 1</a>
      <div class="panel-content">Extra content or submenu</div>
    </li>
    <li class="panel" tabindex="0" aria-expanded="false"> ... </li>
  </ul>
</nav>
/* CSS */
.h-acc ul { display:flex; margin:0; padding:0; list-style:none; }
.panel { flex:0 0 60px; overflow:hidden; transition:flex-basis .35s ease; cursor:pointer; }
.panel.expanded { flex-basis:320px; }
.panel-content { opacity:0; transition:opacity .25s ease; padding:12px; }
.panel.expanded .panel-content { opacity:1; }
// JS (plain)
document.querySelectorAll('.h-acc .panel').forEach(p => {
  p.addEventListener('click', () => {
    document.querySelectorAll('.h-acc .panel').forEach(x => {
      x.classList.remove('expanded'); x.setAttribute('aria-expanded','false');
    });
    p.classList.add('expanded'); p.setAttribute('aria-expanded','true');
  });
  p.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') p.click();
    // add ArrowLeft/ArrowRight focus moves here
  });
});

Key notes and troubleshooting

  • Accessibility: keep tabindex, toggle aria-expanded, and add role/tablist semantics if you have complex panels. Do not rely on hover only — add click/touch handlers for mobile.
  • Performance: animating transforms is smoother on some devices; if you need ultra-smooth animation, animate transform instead of long width changes.
  • Responsive: collapse to a stacked menu on small screens via media queries or switch to a simple toggle.
  • Debugging: if panels don't expand, inspect computed flex-basis and check for conflicting CSS (floats, absolute positioning). If transitions jump, try explicit widths or transform-based animation.

Follow these steps and adapt the sizes, timing, and content to match the look you want. For a quick start you can also use a community plugin, but building this lightweight version keeps control over accessibility and performance.

Recommended Answers

All 2 Replies

Member Avatar for Jeroen van Zijp

By looking at its source-code.

By the way, the link isn't working...

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.