Ich war in letzter Zeit ziemlich beschäftigt und habe mich mehrere Monate lang nicht um meinen Blog gekümmert. Jetzt werde ich ein kürzlich im Projekt erstelltes Menübeispiel aussortieren und es teilen.
Das am häufigsten verwendete Layout im Backend- oder OA-System ist häufig ein Vollbild-Layout, bei dem es sich im Allgemeinen um ein Layout mit drei Zeilen und zwei Spalten oben, in der Mitte und unten, mit einer Kopfzeile, einer Fußzeile, einem linken Menü und einem IAME-Rahmen handelt Seite rechts. Daher wird häufig das faltbare Sekundärmenü verwendet. In diesem Beispiel soll ein solches allgemeineres, vollständig kompatibles und hervorhebbares Sekundärpuffer-Faltmenü implementiert werden.
Merkmale :
Mangel :
Lassen Sie uns kurz über einige einfache Ideen und Probleme sprechen, die bei der Erstellung eines solchen Menüs auftreten.
Im Allgemeinen besteht mein Produktionsprozess beim Erstellen eines Effekts darin, zuerst den Inhalt der HTML-Strukturebene zu zeichnen, dann den Stil zu schreiben und dann einige Effekte wie JS-Spezialeffekte usw. hinzuzufügen. Ich weiß nicht, welches Vorgehensmodell die Experten haben.
Strukturschicht :
Die Idee der Strukturschicht basiert im Allgemeinen auf einem Wahrnehmungsverständnis, normalerweise mit einem Rendering, und basierend auf diesem Rendering wird die prägnanteste HTML-Struktur erstellt. Wie im Bild oben zu sehen ist, besteht der erste Eindruck darin, eine ungeordnete Liste von UL zu verwenden, aber ... dies ist eine zweistufige verschachtelte Liste. Dies ist das erste Problem, das wir berücksichtigen müssen.
Der Aufbau sollte also so aussehen:
Wenn ein Menü der zweiten Ebene vorhanden ist, handelt es sich um eine verschachtelte UL-Struktur. Wenn kein Menü der zweiten Ebene vorhanden ist, sieht es wie folgt aus:
<ul class="menu">
<li><a href="#none">Menüelemente der ersten Ebene</a></li>
</ul>
Natürlich können Sie je nach Ihrer tatsächlichen Situation auch die Methode der geordneten Liste dl-dt-dd verwenden, um diese verschachtelte Struktur zu erstellen.
Bei der originellsten Strukturebene müssen Sie einige notwendige Hooks für CSS und JS hinzufügen, um Stile und Effekte zu steuern. Ich habe mich immer gegen die Methode ausgesprochen, viele Klassennamen hinzuzufügen, was die Größe der Seite am meisten erhöht Der optimierte Ansatz besteht darin, einen oder zwei erforderliche Klassennamen auf den übergeordneten Container anzuwenden und dann mithilfe des untergeordneten (Gruppen-)Selektors verschiedene personalisierte Einstellungen im Stylesheet festzulegen. Wie viele Klassennamen würden Sie sich vorstellen, in der obigen Struktur alle Stile zu definieren?
Mein Ansatz besteht darin, nur drei Klassennamen zu verwenden, um alle Stilanzeigen zu steuern. Einer ist der UL der obersten Ebene, definiert als class="menu", der andere ist der Container des Menüs der zweiten Ebene, dh der verschachtelte UL definiert eine Klasse="level2" und schließlich den Menüpunkt der ersten Ebene li definiert ein class="level1" , mit diesen drei Hooks können Sie den Stil der gesamten Struktur manipulieren.
Präsentationsschicht :
Die Einstellung des Stylesheets ist sehr einfach. Das Einzige, was zu beachten ist, ist, dass ich das Hover-Pseudo nicht verwende, um JS die Steuerung der Anzeige und Ausblendung des Sekundärmenüs zu erleichtern und den Hervorhebungsstatus des aktuell ausgewählten Elements aufzuzeichnen -Klasse, um den Slide-In- und Slide-Out-Effekt der Maus zu erzielen und ihn mit JS zu simulieren. Die Schlüsselcodes zum Steuern von Stilen mithilfe von JS lauten wie folgt:
Menüstil der ersten Ebene
/*Menü mit drei Zuständen der ersten Ebene, für JS-Aufrufe*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px;color:#fff;background:url(../images/menubg.gif ) no-repeat links oben;}
.menu li.level1 a.hove{background-position:left -31px;}
.menu li.level1 a.cur{background-position:left -62px;}
Sekundärer Menüstil
/*Sekundärer Menü-Drei-Status-Stil für JS-Aufrufe*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px;color:#fff;background:url(../images/menubg.gif ) no-repeat links oben;}
.menu li.level1 a.hove{background-position:left -31px;}
.menu li.level1 a.cur{background-position:left -62px;}
Verhaltensschicht :
Wie bereits erwähnt, haben wir den Drei-Zustands-Effekt des Menüs nicht im Stylesheet definiert, daher müssen wir die Ereignisse onmouseover, onmouseout und onclick an jeden Menüpunkt binden, um diesen Effekt zu simulieren. In der Strukturebene haben wir nicht die ID dieses gesamten Containers definiert, sondern nur einen Klassennamen. Daher haben wir in JS eine erweiterte getElementsByClassName()-Methode hinzugefügt (danke an meinen Freund Situ Zhengmei), um dieses Objekt basierend auf der Klasse zu erhalten Name. Verwenden Sie Schleifenschlüsse, um diese drei Ereignisse zu binden.
Ich werde den detaillierten Code nicht einzeln erklären. Die Kommentare in der Demo sind sehr klar. Laden Sie ihn zum Durchsuchen auf Ihren lokalen Computer herunter.
Wenn Sie Fragen haben, posten und diskutieren Sie diese bitte in diesem Blog. Ich wünsche Ihnen viel Spaß bei der Nutzung!
<li><a href="#none">Menüelemente der ersten Ebene</a>
<ul>
<li><a href="#none">Menüelemente der zweiten Ebene</a></li>
</ul>
</li>