CSS-Implementierungscode für mehrstufige Menüs

Dies ist eine ziemlich coole Funktion, die Webseiten wie Desktop-Programme aussehen lässt, beispielsweise das Windows-Startmenü. Das Implementierungsprinzip ähnelt dem eines reinen CSS-Fotoalbums, es gibt jedoch noch weitere Dinge zu beachten. Gehen wir es Schritt für Schritt durch.

Beginnen wir mit einem sehr einfachen Menü der ersten Ebene mit Hover-Effekten.

<ul id="Menü">
  <li>
    <a href="//www.jb51.net/rubylouvre/">
      Menü 1<!--Kleines Bild--><span><!--Großes Bild--></span>
    </a>
  </li>
  <li>
    <a href="//www.jb51.net/rubylouvre/">
      Menü 2<!--Kleines Bild--><span><!--Großes Bild--></span>
    </a>
  </li>
  <li>
    <a href="//www.jb51.net/rubylouvre/">
      Menü 3<!--Kleines Bild--><span><!--Großes Bild--></span>
    </a>
  </li>
  <li Klasse="letzte">
    <a href="//www.jb51.net/rubylouvre/">
      Menü 4<!--Kleines Bild--><span><!--Großes Bild--></span>
    </a>
  </li>
</ul>

Die Struktur kommt Ihnen bekannt vor, oder? Nur dass die ursprüngliche Stelle, an der die Bilder platziert wurden, durch Text ersetzt wurde. Ich habe es auch speziell markiert. Der folgende Code der Präsentationsschicht ist sehr einfach.

* {
  Rand: 0;
  Polsterung: 0;
}
.Speisekarte {
  Schriftgröße: 12px;
}
.menu li {/*Horizontales Menü*/
  schweben: links;
  Listenstil: keiner;
}
.menu ein {
  Anzeige:Block;
  Position: relativ;
  Höhe: 32px;
  Breite: 100px;
  Zeilenhöhe: 32px;
  Hintergrund: #a9ea00;
  Farbe: #ff8040;
  Textdekoration: keine;
  Textausrichtung: zentriert;
}
.menu a:hover {
  Hintergrund: #369;
  Farbe: #fff;
}
.menu li span {
  Anzeige: keine;
  Position: absolut;
  links: 0;
  oben: 32px;
  Breite: 200px;
  Höhe: 150px;
  Hintergrund: #B9D6FF;
}
.menu a:hover span {
  Anzeige:Block;
}

An dieser Stelle sind zwei Dinge zu beachten. Lassen Sie uns zuerst über den ersten sprechen. Der obere Rand des Untermenüs (span-Element) sollte innerhalb des Bereichs des a-Elements bleiben. Wenn der enthaltene Block ein li-Element ist, gilt das Gleiche. Wenn der obere Span-Wert größer als 32 Pixel ist, beispielsweise 40 Pixel, können wir die Maus nicht zum Span-Element bewegen. Da es den Gültigkeitsbereich von a:hover verlässt, wird das Span-Element wieder ausgeblendet.

.menu li span {
  Anzeige: keine;
  Position: absolut;
  links: 0;
  top:40px;/*★★Hier ändern★★*/
  Breite: 200px;
  Höhe: 150px;
  Hintergrund: #B9D6FF;
}

Das zweite Problem betrifft IE6. Es besteht darin, dass das Untermenü nicht verschwindet, wenn mit der Maus aus dem entsprechenden enthaltenden Block herausgefahren wird. Die Pseudoklasse „Hover“ entspricht „Moverover“ und „Moverout“. Wir können den untergeordneten Elementen einen Stil zuweisen, wenn sich die Maus darüber befindet, und einen anderen Stil, wenn sich die Maus außerhalb des Elements befindet. Mit anderen Worten: Die Anzeige kann in IE6 derzeit nicht umgeschaltet werden (mit Ausnahme von img-Elementen). Die Lösung besteht darin, Sichtbarkeit statt Anzeige zu verwenden.

OK, jetzt erstellen wir tatsächlich ein sekundäres Menü. Löschen Sie alle CSS, die sich auf span beziehen, und ersetzen Sie die ursprüngliche span-Position in der Strukturebene durch den folgenden Code:

<ul>
  <li><a href="//www.jb51.net/rubylouvre/">Sekundäres Menü_11</a></li>
  <li><a href="//www.jb51.net/rubylouvre/">Sekundäres Menü_12</a></li>
</ul>

Wir haben verschiedene Browser geprüft und fanden es sehr schwach. Die sekundären Menüelemente von IE6 und Opera10 sind vertikal, aber wir haben das Schweben nicht gelöscht? Die sekundären Menüelemente von Firefox 3.5, Chrome und Safari 4 sind horizontal verteilt, aber oben scheint es ein zusätzliches Menüelement zu geben ... Diesmal schnitten die IE8-Studenten am besten ab. Ich habe IE7 nicht installiert, daher ignoriere ich es immer.

Lassen Sie uns den Stil zurücksetzen, indem wir beispielsweise den enthaltenden Block in das Element „li“ ändern, sodass die sekundären Menüelemente vertikal angezeigt werden.

* {
  Rand: 0;
  Polsterung: 0;
}
.Speisekarte {
  Schriftgröße: 12px;
}
.menu li {/*Horizontales Menü*/
  schweben: links;
  Listenstil: keiner;
  position:relative;/*Verschiebe den enthaltenden Block zum li-Element*/
}
.menu ein {
  Anzeige:Block;
  /*position:relativ; gefunden im a-Element,
  In einem Standardbrowser ist es schrecklich.
  Derselbe Fehler wie beim ersten Ausführen von Pure CSS Album 3 in Chrome*/
  Höhe: 32px;
  Breite: 100px;
  Zeilenhöhe: 32px;
  Hintergrund: #a9ea00;
  Farbe: #ff8040;
  Textdekoration: keine;
  Textausrichtung: zentriert;
}
.menu a:hover {
  Hintergrund: #369;
  Farbe: #fff;
}
/*Neu hinzugefügter sekundärer Menüabschnitt*/
.Menü ul ul {
  Sichtbarkeit:versteckt;/*Am Anfang versteckt*/
  Position: absolut;
  links: 0px;
  oben: 32px;
}
.menu ul a:hover ul{
  Sichtbarkeit: sichtbar;
}
.menu ul ul li {
  clear:both;/*vertikale Anzeige*/
  Textausrichtung: links;
}

Ich habe festgestellt, dass das sekundäre Menü in Firefox, Safari und Chrome nicht reagierte und nicht angezeigt wurde (die CSS-Teile dieser drei Browser wurden stark voneinander kopiert). Die beste Leistung zeigte Opera10, gefolgt von IE8. Allerdings unterstützen alle Elemente von Standardbrowsern die Hover-Pseudoklasse. Im Gegensatz zu IE6 erfordert dieser ein a-Element mit einem href. Wir schreiben etwas CSS-Code um:

.menu ul li:hover ul,/*nicht-IE6*/
.menu ul a:hover ul{/*IE6*/
  Sichtbarkeit: sichtbar;
}

Das sekundäre Menü wird angezeigt, aber auch das mysteriöse „li“-Element wird angezeigt. Ich habe es mit Doppelfloat und Schrumpfverpackung versucht, konnte das mysteriöse Li-Element jedoch nicht loswerden. In Bezug auf Fremdcodes besteht die Methode darin, das gesamte Untermenü außerhalb des Elements „a“ zu platzieren und dann li:hover zu verwenden, um den Stilwechsel zu steuern. Daher wird die Strukturebene wie folgt umgeschrieben:

<div Klasse="Menü">
  <ul>
    <li>
      <a href="//www.jb51.net/rubylouvre/">Menü 1</a>
      <ul>
        <li><a href="//www.jb51.net/rubylouvre/">Sekundäres Menü_11</a></li>
        <li><a href="//www.jb51.net/rubylouvre/">Sekundäres Menü_12</a></li>
      </ul>
    </li>
    <li>
      <a href="//www.jb51.net/rubylouvre/">Menü 2</a>
      <ul>
        <li><a href="//www.jb51.net/rubylouvre/">Sekundäres Menü_21</a></li>
        <li><a href="//www.jb51.net/rubylouvre/">Sekundäres Menü_22</a></li>
      </ul>
    </li>
    <li>
    //***************leicht************
    </li>
    <li>
    //***************leicht************
    </li>
  </ul>
</div>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.