Verstehen Sie die sehr adaptiven Probleme und Lösungen von CSS -verschachtelten Menüs tief

Dieser Artikel zielt darauf ab, das Problem der ungenauen Positionierung nachfolgender Elemente bei der Erweiterung des Untermenüs in den Einstellungen fester Höhen in HTML -verschachtelten Menüs zu lösen. Durch die Analyse der Einschränkungen der festen Höhe wird eine Lösung zur Änderung des CSS -Höhe von festem Wert zu automatisch vorgeschlagen, damit das Menü die Höhe dynamisch entsprechend dem Inhalt anpassen, die Richtigkeit des Layouts und die adaptive Anordnung der Elemente sicherstellen und die Benutzererfahrung verbessern können.

1. Problemhintergrund und Phänomen

Beim Aufbau von verschachtelten Navigationsmenüs auf mehreren Ebenen stoßen Entwickler häufig auf ein gemeinsames Layoutproblem: Wenn sich der zweite oder sogar tiefere Untermenü (wie .Sub-2) ausdehnt, sind seine übergeordneten Menüelemente (wie das Li-Element, das .Sub-1 enthält). Insbesondere sind nachfolgende Elemente keinen Platz für das erweiterte Untermenü, sondern erscheinen auf der linken oder über dem Untermenü und nicht unten.

Dies geschieht normalerweise, wenn die Anzeige/Versteck von Menüs über JavaScript (z. B. JQuery) und CSS -Klassen verwendet werden, um den Menüzustand zu wechseln. Wenn beispielsweise eine .aktive Klasse zum Untermenü hinzugefügt wird, um sie sichtbar zu machen, kann das obige Problem auftreten, wenn die Höhe der Höhe der Klasse auf einen festen Pixelwert eingestellt ist.

2. Problemanalyse: Einschränkungen der festen Höhen

Beobachten Sie den bereitgestellten Code, die Hauptursache des Problems, liegt in der Höhenattributeinstellung der .aktiven Klasse im CSS -Stil:

 .Active {
  Höhe: 55px; /* Festhöhe*///
  Sichtbarkeit: sichtbar;
}

Hier ist die Höhe der .aktiven Klasse auf 55px festgelegt. Wenn das Menü .sub-1 aktiviert ist, erhält es eine Höhe von 55px und wird angezeigt. Wenn jedoch auch das .Sub-2-Menü in .Sub-1 aktiviert ist, ist die Höhe von .sub-1 immer noch auf 55px begrenzt. Das heisst:

1. Übergeordnete Menü unzureichende Höhe: Die feste Höhe von .sub-1 reicht nicht aus, um seinen eigenen Inhalten (einschließlich der internen Links und .Sub-2-Auslöser) und ein vollständig erweitertes .sub-2-Menü aufzunehmen.
2. Nachfolgender Elementpositionierungsfehler: Wenn der Browser das Layout berechnet, bestimmt er die Position seiner nachfolgenden Elemente derselben Ebene (z. B. Last-Link) basierend auf der festen Höhe von .sub-1. Da die tatsächliche Inhaltshöhe von .SUB-1 (einschließlich erweitertem .Sub-2) seine deklarierten 55px überschreitet, bewegen sich nachfolgende Elemente nicht ausreichend nach unten, was zu Überlappungen führt.

Kurz gesagt, feste Höhen können sich nicht an dynamisch ändernde Inhalte anpassen, insbesondere wenn der Inhalt erweiterbare verschachtelte Strukturen enthält.

3. Lösung: Verwenden Sie Höhe: Auto, um adaptiv zu erreichen

Der Kern der Lösung dieses Problems besteht darin, die Menüelemente zu ermöglichen, die Höhe automatisch nach ihrem Inhalt anzupassen. Dies kann erreicht werden, indem die Höheneigenschaft der .aktiven Klasse von einem festen Pixelwert auf Auto geändert wird.

 .Active {
  Höhe: Auto; /* Automatische Höhe*/
  Sichtbarkeit: sichtbar;
}

Wenn die Höhe auf automatisch eingestellt ist, berechnet und rendert der Browser die Höhe des Elements basierend auf der tatsächlichen Höhe des Inhalts innerhalb des Elements. Das heisst:

• Wenn .SUB-1 aktiviert ist, wird es automatisch erweitert, um alle Kinder, einschließlich nicht übertroffen.
• Wenn .Sub-2 dann aktiviert und erweitert wird, passt sein übergeordnetes .Sub-1 die Höhe automatisch erneut an, um sicherzustellen, dass alles in .Sub-2 untergebracht werden kann und dass die Höhe des gesamten .sub-1 die minimale Höhe der Summe aller Kinder ist.
• Da die Höhe von .sub-1 jetzt dynamisch und genau ist, können die folgenden Geschwisterelemente (wie. Last-Link) in der Lage sein, nach unten zu positionieren, um Überlappungen zu vermeiden.

4. Komplette Beispielcode

Das Folgende ist der überarbeitete HTML-, CSS- und JavaScript -Code, der zeigt, wie ein adaptiv hoch verschachteltes Menü erreicht werden kann.

4.1 HTML -Struktur (index.html)

 

<kopf>
  <meta charset="utf-8">
  <meta name="viewPort" content="width = Gerätebreite, initial-scale = 1,0">
  <title> adaptives verschachteltes Menü Tutorial </title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="SHA256-H K7U5CNXL1H5YWQFKTSJ8PCMON9AAQ30GDH27XC0JK =" crosorigin="Anonymous"> </script><script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="Anonymous"> </script>
  <link rel="stylesheet" href="style.css"> 


  <nav>
    <a href="#" id="btn"> <i class="fa-solid fa-bars"> </i> </a>

    <ul class="main">
      <li> <a href="contact.html"> link 1 </a> </li>
      <li> <a href="#"> link 2 </a> </li>
      <li> <a href="#" id="submen-1"> sub-Menü 1 </a>
        <ul class="sub-1">
          <li> <a href="#"> sub 1 link a </a> </li>>
          <li> <a href="#"> sub 1 link b </a> </li>>
          <li> <a href="#" id="submen-2"> sub-Menü 2 </a>
            <ul class="sub-2">
              <li> <a href="#"> sub 2 link x </a> </li>>
              <li> <a href="#"> sub 2 link y </a> </li>>
              <li> <a href="#"> sub 2 link z </a> </li>>
            </ul>
          </li>
        </ul>
      </li>
      <li> <a href="#" id="last-link"> letzter Link </a> </li>
    </ul>
  </nav>

  <script src="script.js"> </script> 

</kopf>

Das obige ist der detaillierte Inhalt vonVerstehen Sie die sehr adaptiven Probleme und Lösungen von CSS -verschachtelten Menüs tief. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!