Member Avatar for Mike_H

I am working on a site that has more menu items than will fit on the screen of standard monitors. I am looking for a nice, simple, and easy to implement free horizontal menu that fits on one line and has left and right arrows to scroll the hidden menu items onto the screen.

I do not want to go to two lines of menu items or multilevel.

CSS and jQuery code are OK. I have not been able to find anything. If you know of any, please let me know. Other ideas are welcome also.

Thanks.

  • 4 Contributors
  • 3 Replies
  • 251 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by KingGold171

Dani AI

Generated

Short answer for : keep the nav as a single horizontal flex row, allow horizontal overflow, and wire two small arrow buttons to change the scroller’s scroll position (via Element.scrollBy). That gives a single-line menu, works on touch (native panning), is lightweight, and avoids heavy dropdown plugins. ’s Superfish is great for multi-level dropdowns but doesn’t solve one-line left/right scrolling directly. (developer.mozilla.org)

A few practical improvements over ’s floated list: use a flex container so items stay on one row and don’t wrap; add CSS scroll-snap for neat item snapping; and detect overflow with scrollWidth > clientWidth to hide the arrows when everything fits. These techniques are well supported and give smooth, predictable scrolling on desktop and mobile. (developer.mozilla.org)

Minimal, copy-and-paste example (HTML/CSS/JS — tune sizes and ARIA labels for your site):

<nav class="hmenu" aria-label="Main navigation">
  <button class="hmenu-prev" aria-label="Scroll left">Prev</button>
  <div class="hmenu-scroller">
    <ul class="hmenu-list">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <!-- more items -->
    </ul>
  </div>
  <button class="hmenu-next" aria-label="Scroll right">Next</button>
</nav>

<!-- CSS: .hmenu-scroller { display:flex; overflow-x:auto; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
     .hmenu-list { display:flex; gap:0.5rem; margin:0; padding:0; list-style:none; }
-->
<!-- JS: use scroller.scrollBy({ left: step, behavior: 'smooth' }) and update buttons by checking scroller.scrollLeft / scroller.clientWidth / scroller.scrollWidth -->

Accessibility and keyboard notes: prefer semantic nav with visible focus styles and focusable links; avoid the complex ARIA menubar role unless you need the full menubar keyboard model — simple keyboard/tab order plus clear focus and visible indicators is often enough. If you do implement arrow-key navigation, follow the WAI-ARIA patterns and test with screen readers. (w3.org)

Troubleshooting tips: tune the scroll step to match several item widths (or use scrollIntoView() for item-level scrolling), ensure overflow and overscroll-behavior stop page bounce on touch if needed, and test resize/RTL scenarios so the arrow hide/show logic stays correct.

Recommended Answers

All 3 Replies

Member Avatar for Member #46692

Go for the market leader...

superfish FTW

Member Avatar for Member #120589

alistapart may have some examples?

Member Avatar for KingGold171

Quick and simple code for what you have asked for.

Place this after the <title> </title> tags and before the </head> tag.

<style type="text/css">
ul#list-nav {
list-style:none;
margin:20px;
padding:0;
width:700px
}

ul#list-nav li {
display:inline
}

ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:80px;
background:#485e49;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
}

ul#list-nav li a:hover {
background:#a2b3a1;
color:#000
}
</style>

If you read the script carefully you will be able to change the color of the buttons and the color it turns when the mouse is hovering over it. Also you can change the width of each button and the total length of the navigation bar.

And in-order to add the navigation buttons use...
(place this after the <body> tag.)

<ul id="list-nav">
<li><a href"#">(Page name)</a></li>
</ul>

To add in more pages simple keep the simple follow this format...

<ul id="list-nav">
<li><a href"#">(Page name)</a></li>
<li><a href"#">(Page name)</a></li>
<li><a href"#">(Page name)</a></li>
<li><a href"#">(Page name)</a></li>
</ul>

Get the idea?


With the # you simple replace this with where you want the button to go.
And the (Page name), well speaks for its self?

Hope this helps you
KG171

*If you need help understanding what to change on the script for colors and width/length please PM me with what you need and i will be happy to help.

Edited by KingGold171 because: Corrected Spelling errors
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.