Beispielcode-Erklärung eines mehrstufigen CSS-Menüs

Der Inhalt dieses Artikels befasst sich mit der Beispielcode-Erklärung des mehrstufigen CSS-Menüs. Freunde in Not können sich darauf beziehen.

Dies ist eine ziemlich coole Funktion, die Webseiten wie Desktop-Programme aussehen lässt, beispielsweise das Startmenü eines Fensters. Das Implementierungsprinzip ist im Grunde das gleiche wie bei einem reinen CSS-Fotoalbum, allerdings gibt es noch mehr Dinge zu beachten, also machen wir es Schritt für Schritt.

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

<ul id="menu">
  <li>
    <a href="http://www.php.cn/">
      菜单一<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li>
    <a href="http://www.php.cn/">
      菜单二<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li>
    <a href="http://www.php.cn/">
      菜单三<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li class="last">
    <a href="http://www.php.cn/">
      菜单四<!--小图--><span><!--大图--></span>
    </a>
  </li>
</ul>

Die Struktur ist sehr vertraut, sie ersetzt lediglich den ursprünglichen Platz für Bilder durch Text. Ich habe es auch extra markiert. Der Code der nächsten Präsentationsebene ist sehr einfach.

* {
  margin:0;
  padding:0;
}
.menu {
  font-size:12px;
}
.menu li {/*水平菜单*/
  float:left;
  list-style:none;
}
.menu a {
  display:block;
  position:relative;
  height:32px;
  width:100px;
  line-height:32px;
  background:#a9ea00;
  color:#ff8040;
  text-decoration:none;
  text-align:center;
}
.menu a:hover {
  background:#369;
  color:#fff;
}
.menu li span {
  display:none;
  position:absolute;
  left:0;
  top:32px;
  width:200px;
  height:150px;
  background:#B9D6FF;
}
.menu a:hover span {
  display:block;
}

Hier gibt es zwei Dinge, die es zu beachten gilt. Lassen Sie uns zunächst über das erste sprechen. Der obere Teil des Untermenüs (span-Element) sollte dafür sorgen, dass der obere Teil im Bereich des a-Elements bleibt. Wenn der enthaltende Block ein li-Element ist, gilt das Gleiche. Wenn der obere Wert von span größer als 32 Pixel ist, z. B. 40 Pixel, können wir die Maus nicht zum Span-Element bewegen. Da es den Gültigkeitsbereich von a:hover verlassen hat, wird das span-Element wieder ausgeblendet.

.menu li span {
  display:none;
  position:absolute;
  left:0;
  top:40px;/*★★修改这里★★*/
  width:200px;
  height:150px;
  background:#B9D6FF;
}

Das zweite Problem tritt nur bei IE6 auf und besteht darin, dass das Untermenü nicht verschwindet, nachdem der entsprechende enthaltende Block mit der Maus ausgeblendet wurde. Die Hover-Pseudoklasse entspricht Moverover und Moveout. Wir können den untergeordneten Elementen beim Mouseover einen Stil und beim Mouseout einen anderen Stil zuweisen. Mit anderen Worten: Die Anzeige kann im IE6 nicht umgeschaltet werden (außer für img-Elemente). Die Lösung besteht darin, Sichtbarkeit anstelle von Anzeige zu verwenden.

Okay, jetzt erstellen wir tatsächlich das sekundäre Menü, löschen das gesamte CSS im Zusammenhang mit span und ändern die Position des ursprünglichen span in der Strukturebene in den folgenden Code:

<ul>
  <li><a href="http://www.php.cn/">二级菜单_11</a></li>
  <li><a href="http://www.php.cn/">二级菜单_12</a></li>
</ul>

Das sind wir Bei jeder Tour fühle ich mich beim Anblick des Geräts ganz schwach. Die sekundären Menüpunkte von IE6 und Opera10 sind vertikal, aber wir haben den Float nicht gelöscht? Die sekundären Menüpunkte von Firefox3.5, Chrome und Safari4 sind horizontal verteilt, aber oben scheint es einen zusätzlichen Menüpunkt zu geben ... IE8-Studenten schnitten dieses Mal am besten ab. Ich habe IE7 nicht installiert und ignoriere es daher immer.

Lassen Sie uns den Stil zurücksetzen, indem wir beispielsweise den enthaltenden Block in das li-Element ändern, damit die sekundären Menüelemente vertikal angezeigt werden können.

* {
  margin:0;
  padding:0;
}
.menu {
  font-size:12px;
}
.menu li {/*水平菜单*/
  float:left;
  list-style:none;
  position:relative;/*把包含块移动li元素*/
}
.menu a {
  display:block;
  /*position:relative;发现放在a元素中，
  在标准游览器中惨不忍睹，
  和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/
  height:32px;
  width:100px;
  line-height:32px;
  background:#a9ea00;
  color:#ff8040;
  text-decoration:none;
  text-align:center;
}
.menu a:hover {
  background:#369;
  color:#fff;
}
/*新增的二级菜单部分*/
.menu ul ul {
  visibility:hidden;/*开始时是隐藏的*/
  position:absolute;
  left:0px;
  top:32px;
}
.menu ul a:hover ul{
  visibility:visible;
}
.menu ul ul li {
  clear:both;/*垂直显示*/
  text-align:left;
}

Ich habe festgestellt, dass das sekundäre Menü in Firefox, Safari und Chrome nicht reagiert und nicht angezeigt werden kann (die CSS-Teile dieser drei Browser sind ernsthaft voneinander plagiiert). opera10 schnitt am besten ab, gefolgt von IE8. Allerdings unterstützen alle Elemente in Standardbrowsern die Hover-Pseudoklasse, im Gegensatz zu IE6, der ein a-Element mit href erfordert. Wir schreiben einen Teil des CSS-Codes neu:

.menu ul li:hover ul,/*非IE6*/
.menu ul a:hover ul{/*IE6*/
  visibility:visible;
}

Das sekundäre Menü kann angezeigt werden, aber das mysteriöse li-Element ist ebenfalls aufgetaucht. Ich habe es mit doppelt schwebender Schrumpffolie versucht, konnte dieses mysteriöse Li-Element jedoch nicht loswerden. In Bezug auf ausländische Codes besteht die Methode darin, das gesamte Untermenü außerhalb des a-Elements zu platzieren und dann li:hover zu verwenden, um den Stilwechsel zu steuern. Daher wurde die Strukturebene wie folgt umgeschrieben:

<div class="menu">
  <ul>
    <li>
      <a href="http://www.php.cn/">菜单一 </a>
      <ul>
        <li><a href="http://www.php.cn/">二级菜单_11</a></li>
        <li><a href="http://www.php.cn/">二级菜单_12</a></li>
      </ul>
    </li>
    <li>
      <a href="http://www.php.cn/">菜单二</a>
      <ul>
        <li><a href="http://www.php.cn/">二级菜单_21</a></li>
        <li><a href="http://www.php.cn/">二级菜单_22</a></li>
      </ul>
    </li>
    <li>
    //***************略************
    </li>
    <li>
    //***************略************
    </li>
  </ul>
</div>

Das obige ist der detaillierte Inhalt vonBeispielcode-Erklärung eines mehrstufigen CSS-Menüs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!