x51398: Navigation Ebenen untereinander

Guten Tag,

ich möchte die folgende Navigationsstruktur horizontal untereinander darstellen - möglichst ohne "position: absolute"

<nav>
<ul>
     <li><a href="#">Ebene 1 Link 1</a></li>
     <li><a href="#">Ebene 1 Link 2</a>
         <ul>
             <li><a href="#">Ebene 2 Link 1</a></li>
             <li><a href="#">Ebene 2 Link 2</a></li>
         </ul>
     </li>
    ... ggf. weitere Ebenen und Unterebenen
</ul>
</nav>

Aussehen soll das Ganze so:

Bildbeschreibung

Momentan habe ich die untergeordneten Ebenen (ab Ebene 2) absolut positioniert und setzte die Höhe des <nav>-Elements mit Javascript, damit die Navigation den nachfolgenden Inhalt nicht überdeckt. Gibt es eine Möglichkeit, die absolute Positionierung (und damit das Setzen der Höhe via JS) zu vermeiden?

Besten Dank und viele Grüße Basti

  1. Hallo

    Ich kann an Hand deiner Beschreibung nicht im einzelnen nachvollziehen was du im Endeffekt wirklich erreiche willst. Auf dem Bild ist zum Beispiel eine dritte Zeile.

    Für das was ich verstanden habe sehe ich als sinnvollstes ein Flexbox-Layout mit einem oder mehreren Checkbox-Hacks.

    Gruss

    MrMurphy

  2. Hej x51398,

    da fehlen aber noch viele Angaben, um zu wissen, wie man das lösen soll: wie soll es denn in der normalen Ansicht (also auf mobilen Geräten) aussehen?

    Wie soll sich das Menü verhalten (beim antippen, beim Überfahren mit der Maus usw).

    Es gibt doch so viele fertige Lösungen - keine dabei, die das tut, was du brauchst?

    Wir können gerne helfen, wenn es darum geht, es zu lernen. Für ein normales Projekt lohnt der Aufwand idR nicht, alles selber zu machen.

    Marc

    1. Es geht mir in diesem Fall nur um die Desktopdarstellung und um das ggf. einzusetzende CSS. Die Frage ist also: ist es generell möglich, verschachtelte Listen untereinander linksbündig darzustellen, ohne absolute Positionierung - also vereinfacht:

      <ul>
         <li>
             <ul>
                 <li></li>
             </ul>
         </li>
      </ul>
      

      So wie in der Bilddarstellung habe ich es momentan schon umgesetzt, nur eben mit absoluter Positionierung. Ich bin kein CSS-Neuling, ich hoffe nur auf einen Lösungsansatz/Denkanstoß, der mir bisher verborgen blieb:-)

      Viele Grüße

      1. Hej x51398,

        muss gerade weg, aber kennst du Superfish? Ich weiß nicht mehr, wie das umgesetzt ist und habe keine Zeit, es nachzusehen. JS ist IMHO nur progressive enhancement, geht IMHO auch bei abgeschaltetem JS…

        Marc

        1. Hi Marc,

          dank dir für das Beispiel; leider ist hier die Höhe des ganzen Konstrukts manuell gesetzt (margin-bottom: 5rem); ich denke, ich bleibe bei meiner bisherigen Lösung: absolute Positionierung der untergeordneten Listen und Setzen der Gesamthöhe des umschließenden <nav>-Elements via JS. Der anschließende Inhalt ist eine Grafik, so dass im Fall von nicht verfügbarem JS kein essentiell wichtiger Part überdeckt wird. Für die mobile Ausgabe gibt es ohnehin ein Hamburger-Menü.

          Vielen Dank, viele Grüße x51398