Links im Content - Bereich öffnen

[Gunnar Bittersmann]

@@Tackerharry

Wenn ich allerdings die Startseite aufrufe, wird diese in einem neuen Tab geöffnet.

Genauer gesagt: in einem anderen Tab. Im Tab mit dem angebenen Namen …

<li><a target="Content" href="startseite.html">Startseite</a></li>

… bei dir also „Content“. Wenn schon ein Tab mit diesem Namen existiert, wird der genommen; wenn nicht, ein neuer. S.a. Martins Erklärung und meinen Codepen dazu. Dass man Links nicht in anderen/neuen Tabs öffnen sollte, steht auch dort nochmal.

Wie Rolf schon sagte, willst du das Menü auf jeder Seite einbinden. Was Rolf nicht sagte: Dabei solltest du die jeweils aktuelle Seite im Menü kennzeichnen – mit aria-current="page". Auf der Startseite also bspw.:

<nav>
  <ul>
    <li><a href="startseite.html" aria-current="page">Startseite</a></li>
    <li><a href="über-uns.html">Über uns</a></li>
    <li><a href="mitteilungen.html">Mitteilungen</a></li>
  </ul>
</nav>

Auf der Über-uns-Seite dann:

<nav>
  <ul>
    <li><a href="startseite.html">Startseite</a></li>
    <li><a href="über-uns.html" aria-current="page">Über uns</a></li>
    <li><a href="mitteilungen.html">Mitteilungen</a></li>
  </ul>
</nav>

Oder noch besser nicht die aktuelle Seite verlinken, sondern auf den Hauptinhalt verweisen:

<nav>
  <ul>
    <li><a href="#main" aria-current="page">Startseite</a></li>
    <li><a href="über-uns.html">Über uns</a></li>
    <li><a href="mitteilungen.html">Mitteilungen</a></li>
  </ul>
</nav>
<main id="main">
  <!-- Hauptinhalt der Startseite -->
</main>

Auf der Über-uns-Seite entsprechend:

<nav>
  <ul>
    <li><a href="startseite.html">Startseite</a></li>
    <li><a href="#main" aria-current="page">Über uns</a></li>
    <li><a href="mitteilungen.html">Mitteilungen</a></li>
  </ul>
</nav>
<main id="main">
  <!-- Hauptinhalt der Über-uns-Seite -->
</main>

Das aria-current-Attribut kann dann auch zur visuellen Hervorhebung der aktuellen Seite im Menü genutzt werden. Make it so.

---

Das Menü kann auch in eine externe Datei ausgelagert und mit SSI oder mit PHP serverseitig in jede Seite eingebunden werden. Die Prüfung auf die jeweils aktuelle Seite müsste dann dort stattfinden.

🖖 Живіть довго і процвітайте