Member Avatar for terrymold

Hi
I'm creating a fairly simple website where a new page would be added every month or so. What I would like to do is create a horizontal menu where a link would be added on the left side of the menu, pushing previous entries to the right.
Eventually, the previous links will "dissapear" off the right of the screen, with the very latest entry still on the left.
But now and again, a viewer will want to read one of the previous pages, so he/she should be able to make the horizontal menu scroll to the left until the desired entry is reached.
In fact, people viewing this website are very likely to want to see entries going back to the first one, and anything in between.
Therefore this horizontal menu should be scrollable anywhere left or right.

Does anyone here know how such a menu could be created?
Regards
Terry

  • 3 Contributors
  • 3 Replies
  • 121 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by terrymold

Dani AI

Generated

A practical, modern pattern that fits the thread: keep newest links at the left, allow free horizontal navigation, and handle new items without surprising a reader who is browsing older entries. 's plugin suggestion and 's container idea are useful starting points; the sketch below uses small CSS + JS (no external plugin required), adds keyboard/touch friendliness, and preserves the viewer's position when needed.

HTML/CSS (semantic, responsive, scroll-snap for nicer paging):

<div class="menu" role="navigation" aria-label="Archive">
  <a class="menu-item" href="/entry-2025-11">Nov 2025</a>
  <a class="menu-item" href="/entry-2025-10">Oct 2025</a>
  ...
</div>
.menu {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
}
.menu-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  padding: 8px 12px;
}

JavaScript notes: prepend items with DOM insertion, then either auto-scroll to the left (to show newest) or preserve the reader's viewport by compensating for the new item's width. Also convert vertical wheel to horizontal and add simple keyboard handlers:

const menu = document.querySelector('.menu');

function prependItem(href, text, preserveView = false) {
  const a = document.createElement('a');
  a.className = 'menu-item';
  a.href = href;
  a.textContent = text;

  const prev = menu.scrollLeft;
  menu.insertBefore(a, menu.firstChild);

  if (preserveView && prev > 0) {
    menu.scrollLeft = prev + a.offsetWidth;
  } else {
    menu.scrollTo({ left: 0, behavior: 'smooth' });
  }
}

menu.addEventListener('wheel', e => {
  if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
    e.preventDefault();
    menu.scrollLeft += e.deltaY;
  }
});

Troubleshooting & accessibility: use real anchors (focusable), add aria-current="page" to the active link, give the container tabindex="0" for keyboard scrolling, and use element.scrollIntoView() for deep-linking. For very large archives, consider windowing/virtualization to avoid DOM bloat. For details on scroll behavior and insertion APIs see MDN: CSS Scroll Snap and Node.insertBefore.

Recommended Answers

All 3 Replies

Member Avatar for Octet

You shall want to setup a DIV and add your content here, once you have done this set the width to a fixed value and use the 'overflow' attribute to tell it to overflow horizontally. This shall create a scroll bar once you have left the DIV dimensions.

Good luck!

Member Avatar for terrymold

Hi AleMonteiro

That Valums effort looks really great, so I'll give that a try first.

Thanks a lot

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.