Horizontal Scrollbare Menüs

1. CSS

Diese CSS Dekalarationn ermöglichen horizontal scrollbare Menüs.

 
        div.scrollmenu {
            width:100%;
            overflow-x: auto;
            white-space: nowrap;
            position: sticky;
            top: 0;
            padding: 0px;
        }
        div.scrollmenu a {
            display: inline-block;
            color: gray;
            text-align: center;
            text-decoration: none;
            border-bottom: 3px solid transparent;
        }
        ::-webkit-scrollbar {       /* Scrollbalken-Styling für WebKit-Browser (Chrome, Edge, Safari) */
            width: 8px; /* Breite des vertikalen Scrollbalkens */
            height: 8px; /* Höhe des horizontalen Scrollbalkens */
        }
        ::-webkit-scrollbar-track {
            background: rgba(248, 246, 246, 0.1); /* Hintergrund des Scrollbalkens: weiss*/
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(128, 128, 128, 0.2); /* Der Scrollbalken: Grauer Farbton mit 20% Transparenz */
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {   background: rgba(128, 128, 128, 0.3); /* Scrollbalken bei Hover : Etwas dunkler  */ }

1.1 div.scrollmenu


        div.scrollmenu {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            position: sticky;
            top: 0;
            padding: 0px; }

width: Nimmt die volle verfügbare Breite ein.
overflow-x: Ermöglicht horizontales Scrollen bei Überlauf.
white-space: Verhindert Umbrüche – alles bleibt in einer Zeile.
position: sticky; top: 0; „Klebt“ am oberen Rand beim Scrollen.
padding: Kein Innenabstand.

1.2 div.scrollmenu a


        div.scrollmenu a {
            display: inline-block;
            color: gray;
            text-align: center;
            text-decoration: none;
            border-bottom: 3px solid transparent;}

inline-block: Lässt sich wie Text platzieren, aber mit Blockeigenschaften.
color: Graue Schriftfarbe.
text-align: Zentriert Inhalte innerhalb des Links.
text-decoration: Keine Unterstreichung.
border-bottom: Unsichtbare Linie (für spätere Effekte mit Hover).

1.3 ::-webkit-scrollbar

::-webkit-scrollbar { width: 8px; height: 8px;  }

Legt Breite und Höhe der Scrollleisten in unterstützten Browsern fest.

1.4 ::-webkit-scrollbar-track

::-webkit-scrollbar-track { background: rgba(248, 246, 246, 0.1);  border-radius: 4px;  }

Gestaltet die Hintergrundspur der Scrollleiste mit leichter Transparenz und Rundung.

1.5 ::-webkit-scrollbar-thumb

::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.2); border-radius: 4px; }

Gestaltet den ziehbaren Teil des Scrollbalkens.

1.6 ::-webkit-scrollbar-thumb:hover

::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.3); }

Bei Mouseover wird der Balken dunkler für bessere Sichtbarkeit.

2. HTML


            <div class="w3-container" style="width:100%;padding: 0px;">
                <div class="scrollmenu w3-light-grey w3-center">
                      <a href="videoplayer.jsp?app=Movie&cat=Kinder"  class="w3-bar-item w3-button    <% out.print(cat.equals("Kinder")?"w3-red":"w3-light-grey"); %> w3-hover-red"   style="width:10%;font-size: 1.5vw">Kinder</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Serien"  class="w3-bar-item w3-button    <% out.print(cat.equals("Serien")?"w3-red":"w3-light-grey"); %> w3-hover-red"   style="width:10%;font-size: 1.5vw">Serien</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Abenteuer"  class="w3-bar-item w3-button    <% out.print(cat.equals("Abenteuer")?"w3-red":"w3-light-grey"); %> w3-hover-red"   style="width:10%;font-size: 1.5vw">Abenteuer</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Action"  class="w3-bar-item w3-button    <% out.print(cat.equals("Action")?"w3-red":"w3-light-grey"); %> w3-hover-red"   style="width:10%;font-size: 1.5vw">Action</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Comedy"  class="w3-bar-item w3-button    <% out.print(cat.equals("Comedy")?"w3-red":"w3-light-grey"); %> w3-hover-red"   style="width:10%;font-size: 1.5vw">Komödien</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Emotion" class="w3-bar-item w3-button    <% out.print(cat.equals("Emotion")?"w3-red":"w3-light-grey"); %> w3-hover-red"  style="width:10%;font-size: 1.5vw">Emotion</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Spannung" class="w3-bar-item w3-button   <% out.print(cat.equals("Spannung")?"w3-red":"w3-light-grey"); %> w3-hover-red" style="width:10%;font-size: 1.5vw">Spannung</a>
                      <a href="videoplayer.jsp?app=Movie&cat=SciFi"   class="w3-bar-item w3-button    <% out.print(cat.equals("SciFi")?"w3-red":"w3-light-grey"); %> w3-hover-red"    style="width:10%;font-size: 1.5vw">Sci-Fi</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Indies"  class="w3-bar-item w3-button    <% out.print(cat.equals("Indies")?"w3-red":"w3-light-grey"); %> w3-hover-red"   style="width:10%;font-size: 1.5vw">Indies</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Musik"   class="w3-bar-item w3-button    <% out.print(cat.equals("Musik")?"w3-red":"w3-light-grey"); %> w3-hover-red"    style="width:10%;font-size: 1.5vw">Musik</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Western" class="w3-bar-item w3-button    <% out.print(cat.equals("Western")?"w3-red":"w3-light-grey"); %> w3-hover-red"  style="width:10%;font-size: 1.5vw">Western</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Sport"   class="w3-bar-item w3-button    <% out.print(cat.equals("Sport")?"w3-red":"w3-light-grey"); %> w3-hover-red"    style="width:10%;font-size: 1.5vw">Sport</a>
                      <a href="videoplayer.jsp?app=Movie&cat=Space"   class="w3-bar-item w3-button    <% out.print(cat.equals("Space")?"w3-red":"w3-light-grey"); %> w3-hover-red"    style="width:10%;font-size: 1.5vw">Raumfahrt</a>
                  </div>
              </div>

Fazit

Dieser CSS-Code erzeugt ein responsives, benutzerfreundliches horizontales Menü mit Sticky-Verhalten und modernem Scrollbalken-Styling für WebKit-Browser.