Member Avatar for shakerxxx

I am trying to code this kind of menu ( ) for my web page but I have no clue how to do this. does anyone has idea about this. or What is this menu name?

Thank you so much for help

Sincerely,
Yunus

  • 4 Contributors
  • 3 Replies
  • 130 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

— following up on this thread (and on the pointers from and ), a modern, lightweight way to reproduce that stacked/expandable menu is to use CSS Flexbox for the vertical stack, animate flex-basis for the expand/collapse effect, and toggle a single class with minimal JS so keyboard/ARIA state stays correct. That approach avoids heavy plugins, stays responsive, and is easier to keep accessible.

Example skeleton (HTML + CSS):

<div class="stack" role="tablist" aria-label="Sections">
  <div class="item">
    <h3><button aria-expanded="false">Section 1</button></h3>
    <div class="panel">Content for section 1</div>
  </div>
  <div class="item"> ... </div>
</div>
.stack { display:flex; flex-direction:column; height:70vh; }
.item { flex-basis:60px; overflow:hidden; transition:flex-basis .35s ease; }
.item.expanded { flex-basis:320px; }
.panel { opacity:0; transition:opacity .25s; }
.item.expanded .panel { opacity:1; }
@media (prefers-reduced-motion: reduce) { .item, .panel { transition:none; } }

Small JS to toggle (keeps aria-expanded in sync):

document.querySelector('.stack').addEventListener('click', e => {
  const btn = e.target.closest('button');
  if (!btn) return;
  const item = btn.closest('.item');
  const willExpand = btn.getAttribute('aria-expanded') !== 'true';
  document.querySelectorAll('.item').forEach(i => {
    const b = i.querySelector('button');
    i.classList.toggle('expanded', i === item && willExpand);
    if (b) b.setAttribute('aria-expanded', String(i === item && willExpand));
  });
});

Notes and troubleshooting: use prefers-reduced-motion to respect users who dislike animation; add role/aria-expanded exactly as above for keyboard/screen-reader support (see the WAI-ARIA accordion pattern for details). If expansion pushes content off-screen on narrow windows, either constrain the container height or use a ResizeObserver to adjust sizes dynamically. For flexbox/transition behavior and accessibility references, see the MDN Flexbox docs and the WAI-ARIA patterns linked below.

Basic Concepts of Flexbox
WAI-ARIA accordion pattern

Recommended Answers

All 3 Replies

Member Avatar for theighost

well, I can't do this, but you either use Flash, or Jquery

Member Avatar for Kylan

Wow nice menu.

Member Avatar for almostbob

its a (css/javascript) menu, very similar effects can be done in straight css,

This is a poor menu implementation, squeezebox supports dynamic sizing by default and they should have used it, if you reduce the window to a part screen, the entire active part of the menu, pushes offscreen right and is invisible.
on a scale of 0-10 this implementation is maybe 2
potential to do much more in your implementation of the same freeware
just about any 'vertical drop down css menu's could be used to make this menu,
without flash or java, the flash on the site is just the scroller down the side

Edited by almostbob because: n/a
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.