Kennzeichnung des aktuellen Navigationspunktes

[Lupus_III]

Hallo zusammen,
ich habe in der Vergangenheit bei kleinen Navigationsmenüs dem aktuellen Navigationspunkt immer die Klasse "aktiv" gegeben, um damit per CSS eine andere Farbe oder Border zuzuweisen.
Wenn ich größere Navigationsmenüs per include Befehl in die einzelnen Webseiten einbinde, besteht diese Möglichkeit meines Erachtens nicht. gibt es dafür eine Lösung?

[Sempervivum]

Mir scheint, Du hast bisher, wenn es auf jeder Seite eine kleine Nav gab, dem betr. Navigationspunkt statisch die Klasse "aktiv" gegeben. Das funktioniert natürlich nicht, wenn die Nav eingebunden wird und der Code immer aus der selben Datei kommt. Es ist jedoch kein Problem, den Navigationspunkt, der zu der aktuellen Seite gehört, dynamisch aus der URL zu ermitteln und die Klasse zuzuweisen:

    <script>
        const
            links = document.querySelectorAll('nav a'),
            url = location.href;
        links.forEach(link => {
            if (url.includes(link.getAttribute('href'))){
                link.classList.add('active');
            }
        });
    </script>

Jedenfalls wenn ich mir deine Struktur richtig vorstelle.

[Lupus_III]

Danke für Deine schnelle Reaktion. Muss ich das Script in jede Seite in den head-Bereich einfügen oder nur in der navigation.php?

[Sempervivum]

Traditionell platziert man Javascript zwar entweder im head-Bereich oder am Ende des Body, aber es sollte kein Problem sein, dieses in der navigation.php einzufügen, das hat dann den Vorteil, dass Du es nicht mehrfach hast. Dann aber am Ende, damit die Links zur Verfügung stehen.

[Lupus_III]

Sorry, aber das script setzt nicht die class active beim aktiven Link und deshalb wird auch nicht die Gestaltung aus dem CSS benutzt.

[Sempervivum]

Passt denn der Selektor in dieser Zeile?

links = document.querySelectorAll('nav a')

Es müssen Links in Form von a-href-Tags vorhanden sein innerhalb eines nav-Tags.
In dieser Form hatte ich es getestet und es hatte funktioniert.

[Lupus_III]

Bei mir sieht die Navigationsstruktur so aus:

<nav>
<label for="drop" class="toggle">Menü</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="index.php">Home</a></li>
<li><a href="team.php">Team</a></li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Studio+</label>
<a href="#">Studio</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="studio.html">Studio </a></li>
<li><a href="pkurse.html">Präventionskurs</a></li>
<li><a href="ems.html">Ems</a></li>
<li><a href="ptraining.html">Personal Training</a></li>
<li><a href="faszien.html">Faszientherapie</a></li>
<li><a href="wellness.html">Wellness</a></li>
</ul>
</li>

<li><a href="mitglied.html">Mitgliedschaft</a></li>
<li><a href="kurse.html">Kurse </a></li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Firmen Kooperationen+</label>
<a href="#">Firmen Kooperationen</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="firmen.html">Firmen Kooperationen </a></li>
<li><a href="https://reha-webpage.firebaseapp.com/#/page/kurse/recaro" target="_blank"> <b>RECARO</b> Login</a></li>
</li>
<!--<li><a href="firmen.html">Firmen Kooperationen</a></li>-->

</ul>
</nav>

Muss ich dann in dieser Zeile - links = document.querySelectorAll('nav a'), - nach nav auch noch ul und li einfügen?

[Sempervivum]

Muss ich dann in dieser Zeile - links = document.querySelectorAll('nav a'), - nach nav auch noch ul und li einfügen?

Nein, weil zwischen "nav" und "a" ein Leerzeichen steht kann das a-Element ein Nachfahre auf einer beliebigen Stufe sein. Eigentlich müsste es so funktionieren.
Wenn Du das online hast, dann poste doch die URL.
Und spielt da vielleicht eine Weiterleitung mit htaccess hinein?

[Localfu]

Wenn du einen Apache-Webserver oder Windows-Webserver hast, kannst du mit der .htaccess-Datei das Rewirite-Modul verwenden. Damit lassen sich URLS so anpassen das sie so aussehen: https://meinedomain.de/aktuelles anstatt https://meinedomain.de/akutuelles.html

[Lupus_III]

Es gibt keine htaccess Datei. Ich habe jetzt mal die Änderungen hochgeladen. Geändert sind die Dateien index.php, team.php und navigation.php. Die Url ist - http://erich-wolf.bplaced.net/
Der Rest ist noch alt.

[Sempervivum]

Alles klar, die Klasse wird korrekt gesetzt, aber beim a-href-Element während Du dich im CSS auf das li beziehst. Ändere das Javascript so:

 const
links = document.querySelectorAll('nav a'),
url = location.href;
links.forEach(link => {
if (url.includes(link.getAttribute('href'))){
link.closest('li').classList.add('active');
}
});

BTW: Dein HTML ist nicht valide weil die eingebundene Datei das HTML-Grundgerüst mit html, head etc. enthält. Die Browser sind zwar sehr tolerant gegenüber so etwas, sollte aber nicht sein.

[Lupus_III]

Das war die Lösung. Herzlichen Dank.

"BTW: Dein HTML ist nicht valide weil die eingebundene Datei das HTML-Grundgerüst mit html, head etc. enthält. Die Browser sind zwar sehr tolerant gegenüber so etwas, sollte aber nicht sein." - reicht es, wenn man nur den head-Bereich weglässt oder muss auch das html-Gerüst komplett weg?

[Sempervivum]

Das gesamte HTML-Gerüst muss raus. Ich hoffe, Du brauchst es nicht anders wo mit dem Gerüst?

[Localfu]

Denk an den Datenschutz; wenn du externe Dienste wie von Google nutzt, solltest du bedenken, dass an diese Daten gesendet werden. Binde lieber lokal die Daten und Dateien die du benötigst ein oder frage vorher ob die Besucher das so möchten.

[Lupus_III]

Denk an den Datenschutz; wenn du externe Dienste wie von Google nutzt, solltest du bedenken, dass an diese Daten gesendet werden. Binde lieber lokal die Daten und Dateien die du benötigst ein oder frage vorher ob die Besucher das so möchten.

Sprichst du hier von den Links im head-Bereich und wenn ja, wie informierst Du Deine User?