Das haben Sie schon hundertmal gesehen
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>Der klassische Menü-HTML, den Sie durch CSS in beliebige schöne Dinge verwandeln können. Sie könnten ihn auf allen Ihren Seiten einfügen, indem Sie ihn in eine eigene HTML-Datei (wie „menu.html“) packen und ihn auf Ihren Seiten mit einer einfachen Include-Anweisung wie diesem PHP-Snippet einfügen
<?php include_once("menu.html"); ?>
Jetzt müssen Sie eine Klasse hinzufügen, um Ihren Besuchern anzuzeigen, wo sie sich in Ihrer aktuellen Navigation befinden
<ul>
<li><a class="selected" href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>Die ausgewählte Klasse könnte ein Hintergrundbild wechseln oder den Text fett darstellen oder etwas anderes, um die aktuelle Navigation anzuzeigen. Das ist großartig, außer dass Sie diesen Codeblock jetzt für eine bestimmte Seite individualisiert haben. Oh nein! Wir haben die gesamte Nützlichkeit der Include-Anweisung zunichte gemacht. Auf diese Weise müssten wir diesen Code auf jeder einzelnen Seite platzieren und ändern, wo wir die ausgewählte Klasse platzieren.
Stattdessen geben wir jedem einzelnen Link im Menü eine eigene, eindeutige Klasse
<ul>
<li><a class="home" href="#">Home</a></li>
<li><a class="about" href="#">About us</a></li>
<li><a class="contact" href="#">Contact us</a></li>
</ul>Dies gibt uns immer noch keine Möglichkeit, einzelne Menüpunkte auf einzelnen Seiten hervorzuheben. Zumindest nicht von allein...
Hier kommt der Trick
Geben Sie jedem <body>-Tag auf Ihren Seiten eine eindeutige ID. Zum Beispiel <body id="home">. Dann können Sie CSS erstellen, das die Menüpunkte nur beeinflusst, wenn die Menü-Linkklasse und die Body-ID übereinstimmen
#home .home, #about .about, #about .about, #contact .contact
{
Your CSS stylings here
}Was für ein großartiges Beispiel für die Schönheit und Effizienz von CSS. Danke Trenton Moss.
Ich konnte einige Teile dieses Artikels über das Einbinden von Navigationscode auf allen Seiten (auch mit aktueller Navigationshervorhebung!) nicht verstehen, aber ich denke, ich muss noch einige Ressourcen dazu prüfen, denn es klingt interessant.
Hallo Daniel,
Der Hauptpunkt des Artikels ist, dass Sie eindeutige IDs für das Body-Element auf Ihren verschiedenen Seiten verwenden können und dann nur bestimmte CSS auf dieser Seite basierend auf übereinstimmenden IDs und Klassen aktivieren können. Grundsätzlich hilft dies, Redundanz zu bekämpfen, da Sie dann eine Include-Anweisung zum Einfügen der Navigation verwenden können, anstatt sie auf jeder Seite zu wiederholen.
Trenton erklärt es vielleicht besser in seinem Artikel, der unten auf der Seite verlinkt ist (es ist Nr. 10).
Wenn Sie weitere Fragen haben, zögern Sie nicht, uns zu kontaktieren.
Tippfehler
class = "home"
sollte sein
id = "home"
Toller Tipp. Ich habe immer PHP verwendet und eine Variable am Anfang deklariert, um den aktiven Status festzulegen, aber das ist viel einfacher und effizienter. Ich werde diesen auf jeden Fall verwenden.
Sehr hilfreich.
Vielen Dank