Der Menü-Hervorhebungseffekt ist eine Designmethode, die häufig auf jeder Webseite verwendet wird. Er kann Benutzern effektiv mitteilen, in welcher Spalte sie sich gerade befinden. Dies ist auch die Methode, die ich häufig verwende. Im Allgemeinen verfügen Webseiten über mindestens zwei Menüebenen. Die erste ist das allgemeine Navigationsleistenmenü oben und die andere ist das Kategorienavigationsmenü links. Generell ist es erforderlich, dass der aktuelle Status auch im Menü der zweiten Ebene erfasst werden kann, wenn das Menü der ersten Ebene markiert ist.
Wenn der Header-Bereich, der das obere Menü enthält, fest ist, das heißt, er muss nicht jedes Mal neu geladen werden, kann er in diesem Fall einfach mit reinem CSS oder JS implementiert werden, aber heute werde ich nicht darüber sprechen. Worüber wir heute sprechen, ist, dass das Menü der ersten Ebene und das Menü der zweiten Ebene auf jeder Seite dynamisch geladen werden , das heißt, sie werden als Benutzersteuerelemente geladen. In diesem Fall ist es schwierig, den hervorgehobenen Status des Menüs aufzuzeichnen.
Natürlich können Sie sagen, dass Sie Cookies verwenden können, um den zuletzt aufgezeichneten Status aufzuzeichnen, wenn jede Seite geladen wird. Ja, das kann tatsächlich aufgezeichnet werden, aber diese Methode wird in einigen komplexen Anwendungen mit vielen Unterseiten zu Problemen führen viel Verwirrung und Ärger für die Benutzer. Wenn das Projekt beispielsweise während des Cookie-Lebenszyklus erneut geöffnet wird, ist der Cookie-Lebenszyklus noch nicht vollständig beendet. Außerdem wird der zuletzt gespeicherte Status aufgezeichnet, und die Seitenadresse hat sich zu diesem Zeitpunkt geändert, sodass das aktuell hervorgehobene Menü angezeigt wird ist nicht das, was der Benutzer sehen möchte. Die Praxis hat gezeigt, dass das Problem, dass Benutzer die Seite böswillig aktualisieren, nicht perfekt gelöst werden kann, egal wie lange Sie den Lebenszyklus dieses Cookies festlegen. Das ist in der Tat eine schlechte Sache!
Gibt es also einen besseren Weg, diese Situation zu lösen?
Die Antwort ist ja. Wir wissen , dass der beste Weg, dieses Problem zu lösen, darin besteht, den Hervorhebungsstil des aktuellen Menüs beim Laden jeder Seite explizit entsprechend der URL-Adresse der Seite festzulegen . Dies löst Probleme dieser Art perfekt und auf diese Weise bleibt der hervorgehobene Status unverändert, egal wie böswillig der Benutzer auf die Schaltfläche „Aktualisieren“ klickt. Sobald Sie das Prinzip kennen, wird es viel einfacher umzusetzen sein.
Strukturschicht
Menüstrukturebene der ersten Ebene:
Es ist ersichtlich, dass die Linkadresse in diesem Menü der ersten Ebene im Allgemeinen keinen Parameterwert hat. Die Strukturebene des sekundären Menüs:
Anders als im Menü der ersten Ebene fügen wir der Linkadresse im Menü der zweiten Ebene zwei Parameterwerte hinzu. Der pId-Parameter zeigt auf die Seriennummer des obersten Menüs der ersten Ebene und sId ist die Sequenznummer des Menü selbst. Wir legen zwei unterschiedliche IDs für die gesamte Container-UL dieser beiden Menüs fest. Sie müssen in JS aufgerufen werden, damit sie nicht fehlen dürfen.
Stilebene
Bezüglich des Stils gibt es eigentlich nichts Besonderes. Sie können ihn auf den gewünschten Stil einstellen. Zu beachten ist lediglich, dass wir die drei Statusstile der Menühervorhebung für den dynamischen Aufruf durch JS separat festlegen müssen .
/*Drei Stileinstellungen für das Menü der ersten Ebene*/
#menu li a.normal{background:#fff;}//Normaler Stil
#menu li a.over{background:#00ff00;} //Rollender Stil
#menu li a.cur{background:#ff0000;color:#fff;} //Stil hervorheben
/*Drei Stileinstellungen für das sekundäre Menü*/
#othermenu li a.normal{background:#fff;} //Normaler Stil
#othermenu li a.over{background:#AA7F00;color:#fff;} //Rollender Stil
#othermenu li a.cur{background:#7F0000;color:#fff;} //Stil hervorheben