Wie man ein horizontales Menü durch Scrollen auf der Website macht: Schritt für Schritt Anleitung

Horizontales Menü – dies ist ein wichtiger Teil der Website, der Benutzern einen bequemen Zugriff auf verschiedene Bereiche der Website ermöglicht. Wenn jedoch die Anzahl der Menüpunkte die Bildschirmbreite überschreitet, tritt ein Anzeigeproblem auf. In diesem Artikel werden wir uns ansehen, wie Sie ein horizontales Menü mit einem Scrolling implementieren, damit Benutzer den gewünschten Abschnitt leicht finden können.

Bewährter Ansatz zum Erstellen eines horizontalen Scrolling-Menüs wird CSS und JavaScript verwendet. Zuerst erstellen wir eine grundlegende HTML-Struktur und fügen dann Stile und Funktionalität mit CSS und JavaScript hinzu. Es werden grundlegende Tags verwendet, um Elemente zu markieren und zu stylen.

Wie man anfängt:

1. Erstellen Sie ein neues HTML-Dokument und fügen Sie einen Container für das horizontale Menü hinzu. Verwenden Sie zum Beispiel ein Tag .
2. Erstellen Sie Elemente innerhalb des Containers und fügen Sie für jeden Menüpunkt ein Element hinzu
3. .
4. Formatieren Sie Container, Listenelemente und Menüelemente mit CSS. Legen Sie die gewünschte Breite und Höhe fest, wählen Sie Farben aus, legen Sie Einrückungen fest usw.
5. Fügen Sie ein JavaScript-Skript hinzu, um das Menü Scrollen zu verarbeiten. Erstellen Sie einen Ereignishandler, der je nach Bildlaufposition durch das Menü scrollt.

Wenn Sie diese Schritt-für-Schritt-Anleitung befolgen, können Sie ein horizontales Menü mit bequemem Scrollen auf Ihrer Website erstellen. Die Methode ermöglicht eine einfache Navigation durch eine große Anzahl von Abschnitten und erhöht die Benutzerfreundlichkeit der Website für die Benutzer.

Die Bedeutung des horizontalen Menüs auf der Website

Der Hauptvorteil eines horizontalen Menüs besteht darin, dass viele Links kompakt auf einer Ebene angezeigt werden können. Dies macht die Navigation auf der Website für Besucher einfacher und intuitiver. Ein horizontales Menü hilft auch, eine gute Benutzererfahrung zu schaffen - die Benutzerfreundlichkeit der Website erhöht die Wahrscheinlichkeit, dass Besucher länger auf der Website bleiben und eher mit Inhalten interagieren oder Einkäufe tätigen.

Es ist wichtig, ein horizontales Menü mit gutem Design und visueller Attraktivität zu erstellen, damit es die Aufmerksamkeit der Besucher auf sich zieht und sie ermutigt, die Website weiter zu erkunden. Die klare Platzierung von Links in einem horizontalen Menü macht die Navigation einfacher und sofortiger. Darüber hinaus ermöglicht das horizontale Menü, die Wichtigkeit und Priorität der Bereiche der Website zu betonen, indem ein Menüelement hervorgehoben wird.

Es ist allgemein bekannt, dass eine einfache und intuitive Navigation einer der Hauptfaktoren ist, die den Erfolg einer Website beeinflussen. Das horizontale Menü gibt den Besuchern die Möglichkeit, schnell auf der Website zu navigieren und die richtigen Informationen zu finden, was zu einer verbesserten Benutzererfahrung beiträgt und die Zufriedenheit der Benutzer erhöht.

Schritt 1. Vorbereiten von Dateien und Websitestrukturen

Bevor Sie mit der Erstellung eines horizontalen Menüs mit dem Scrollen auf der Website beginnen, müssen Sie alle notwendigen Dateien vorbereiten und die Struktur der Website definieren. Folgendes muss getan werden:

1. Erstellen Sie einen neuen Ordner auf Ihrem Computer, in dem sich das gesamte Projekt befindet.
2. Erstellen Sie in diesem Ordner mehrere Dateien. Zum Beispiel index.html für die Hauptseite der Website und style.css für Stile.
3. Öffnen Sie die Datei index.html und fügen Sie das folgende grundlegende HTML-Markup hinzu:

In diesem Markup haben wir einen Seitentitel erstellt, eine Datei mit Stilen angehängt, dem Tag eine Hauptnavigation hinzugefügt und dem Tag einen Platz für den Seiteninhalt hinzugefügt .

Jetzt, da wir die grundlegende Struktur der Website haben, können Sie mit der Erstellung eines horizontalen Menüs mit Scrollen beginnen.

Erforderliche Dateien und Verzeichnisse erstellen

Bevor Sie mit der Erstellung eines horizontalen Menüs mit Scrollen auf der Website beginnen, müssen Sie mehrere Dateien und Verzeichnisse erstellen.

1. Erstellen Sie einen neuen Ordner auf Ihrem Computer, in dem alle Dateien für das Menü gespeichert werden.

2. Erstellen Sie in diesem Ordner eine Index-Datei.html, das die Hauptdatei Ihrer Website sein wird und die gesamte Struktur des HTML-Codes enthält.

3. Erstellen Sie einen weiteren Ordner mit dem Namen css, in dem die Stylesheet-Datei für das Menü gespeichert wird.

4. Erstellen Sie im CSS-Ordner eine Style-Datei.css, das alle Stile für ein horizontales Scrollmenü enthält.

5. Erstellen Sie einen weiteren Ordner mit dem Namen js, in dem die Skriptdatei für das Menü gespeichert wird.

6. Erstellen Sie im js-Ordner eine Script-Datei.js, das Skripte enthält, um ein horizontales Scrolling-Menü zu betreiben.

Daher sollten Sie die folgenden Dateien und Verzeichnisse erhalten:

• Ordner mit dem Namen Ihres Projekts (z. B. "menu-scrolling")
• index.html
• CSS-Ordner
• style.css
• Js-Ordner
• script.js

Nachdem Sie die erforderlichen Dateien und Verzeichnisse erstellt haben, können Sie mit dem Schreiben von Code für das horizontale Scrollmenü beginnen.

Einrichten der Websitestruktur

Bevor Sie mit der Erstellung eines horizontalen scrollbaren Menüs beginnen, müssen Sie die Struktur der Website anpassen. Um dies zu tun, erstellen Sie die Hauptblöcke, die das Menü und seine Elemente enthalten.

Eine Möglichkeit, die Struktur einer Website zu organisieren, besteht darin, eine Tabelle zu verwenden. Erstellen Sie eine Tabelle mit einer Zeile und einer Zelle, die das Menü enthält. Die Zellenbreite sollte ausreichen, um alle Menüpunkte unterzubringen und gleichzeitig einen horizontalen Bildlauf zu ermöglichen.

Nachdem Sie eine Tabelle erstellt haben, können Sie Verweise und Menüelemente hinzufügen. Sie können dies tun, indem Sie der Tabellenzelle Tags hinzufügen.

Jetzt, da die Struktur Ihrer Website eingerichtet ist, können Sie mit dem Erstellen eines scrollbaren horizontalen Menüs fortfahren.

Schritt 2. Erstellen von HTML- und CSS-Code für Menüs

2. Fügen Sie CSS-Stile zum Menü hinzu. Geben Sie Höhe, Breite, Einzug, Farben und andere Eigenschaften an, um das Menü zu stilisieren:

3. Speichern Sie die Datei mit der Erweiterung .html und öffnen Sie es in einem Browser. Jetzt sollten Sie ein horizontales Menü haben, das bei Bedarf horizontal gescrollt werden kann.

Definieren der Hauptmenüelemente

Ein horizontales Menü, das auf der Website gescrollt wird, erfordert bestimmte Elemente, damit es funktioniert. Hier sind die wichtigsten Elemente, die definiert werden müssen:

• - container für das gesamte Menü;
• - liste der Menüelemente;
  • - separates Menüelement;
  • - link zu einer Seite oder einem Abschnitt der Website;
  mit der CSS-Eigenschaft display: inline-block; wird horizontal nacheinander positioniert. Jedes Menüelement enthält einen Link zur gewünschten Seite oder zum gewünschten Abschnitt der Website.

  Schreiben von grundlegendem CSS-Code zum Styling

  Um ein horizontales Scrollmenü auf der Website zu erstellen, müssen Sie grundlegende CSS-Stile anwenden. Verwenden Sie den folgenden Code:

  HTML-Markup:

  CSS-Stile:

  .menu .menu ul .menu li .menu li:last-child .menu li a .menu li a:hover

  In diesem Beispiel haben wir die Hauptstile für den Menücontainer (Klasse "menu"), die Listenelemente (Tag "ul" und "li") sowie die Verweise (Tag "a") festgelegt. Um sicherzustellen, dass das horizontale Menü scrollt, haben wir die Eigenschaft "overflow-x: scroll" angewendet, die eine horizontale Bildlaufleiste hinzufügt, wenn Elemente außerhalb des Containers liegen.

  Wenn Sie diese CSS-Stile nun auf das HTML-Markup anwenden, erhalten Sie ein horizontales Scrollmenü auf der Website.