Navigation Link und Dropdown

[Tibi]

Hallo. Ich bin sehr neu im Bereich HTML und Css und habe ein kleines Problem. Ich versuche meiner Frau ein Kochrezept Webseite zu erstellen mit ihren eigenen Gerichte.
Nun hab ich das Problem bei der Navigation. Da es sehr viele Unterseiten hat ( jedes Gericht in eigener html ) muss ich jedesmal die Navigation Class kopieren und einfügen.
Gibt es da auch eine andere Möglichkeit, dass man nicht auf jeder Seite die ganzen Zeilen einfüggen muss? Außerdem kann es später passieren, das ich ein Dropdown-Menü zu einer Kategorie anpassen muss. Wie ist da die beste Lösung?

<!--Navigation-->
<div class="py-1">

<ul class="nav d-flex justify-content-between">
<a href="vorspeisen.html" class="text-white">Vorspeisen</a>
<a href="suppen.html" class="text-white">Suppen</a>
<a href="salate.html" class="text-white">Salate</a>
<a href="eingelegtes.html" class="text-white">Eingelegtes</a>
<a href="hauptgerichte.html" class="text-white">Hauptgerichte</a>
<a href="beilagen.html" class="text-white">Beilagen</a>
<a href="kuchentorten.html" class="text-white">Kuchen/Torten</a>
<a href="brot.html" class="text-white">Brot</a>
<a href="plaetzchen.html" class="text-white">Plätzchen</a>
</ul>
</div>

 

[scatello]

Wenn du PHP nutzen kannst, wäre das kein Problem. Man lagert die Navigation in eine eigene Datei aus und liest diese in allen HTML-Seiten mit der PHP-Funktion readfile ein. Ist keine große Sache.

 

[Tibi]

Danke für die schnelle Antwort. Php kann ich leider nicht. Gibt es noch eine andere Möglichkeit?

 

[scatello]

Nicht mit reinem HTML.

 

[AndreasB]

@Tibi Da hast du zielsicher eines der Wichtigsten Themen der Webentwicklung gefunden. Daher gibt es für dieses Problem Viele Lösungsmöglichkeiten.
Alle laufen aber darauf hinaus, dass du dein HTML dynamisch erstellen musst. HTML selber bietet dazu keine Möglichkeiten.

Ich würde es mal in drei grobe Kategorien Einteilen:
1. Das HTML wird, bei anfrage, auf dem Server zusammengebaut und an den Client gesendet. (zum Beispiel mit PHP)
2. Das HTML wird Zusammengebaut und als Statische Seiten auf dem Server abgelegt (Stichwort "Template engines" oder "Static Sites")
3. Das HTML wird mit JavaScript im Client zusammengebaut. (Dafür gibt ein eine große Menge an Frameworks oder auch Web-Components)

Ich würde dir Raten erstmal zu überlegen, welche Kategorien du verwenden möchtest.
Oft hängt so eine Entscheidung davon ab, wie schnell sich die Daten auf deiner Seite ändern und wieviele Besucher deine Seite hat.
Das spielt für dich aber keine große Rolle und so würde ich dir Raten die Entscheidung daran festzumachen welche weitere Sprache du dir aneignen möchtest da wie gesagt, reines HTML das nicht anbietet.

 

[Sempervivum]

Php kann ich leider nicht. Gibt es noch eine andere Möglichkeit?

AndreasB hat jetzt andere Möglichkeiten aufgezeigt aber IMO ist 1. am einfachsten zu realisieren, auch für jemand, der neu ist im Thema. Du brauchst dafür auch keine komplette Ausbildung in PHP. Hier wird beschrieben wie es geht:
https://wiki.selfhtml.org/wiki/PHP/...it_include_nachladen#Auslagern_der_Navigation
Trifft genau dein Problem.

 

[Tibi]

Vielen Dank für eure Antworten. Ich werde diese Sachen natürlich ausprobieren und später berichten.