Menüpunkte (Nested Sets) sauber als verschachtelte Liste ausspielen.

[carapau]

Guten Abend zusammen!

Ich sortiere meine Menüpunkte mit Nested Sets - das klappt auch alles wunderbar. Beim Auslesen der Datensätze habe ich nun neben den Werten "left" und "right" auch die Tiefe (level).

Im Adminbereich hat es gereicht die Levels wie folgt hervorzuheben:

<li><a href="#" style="padding-left: <?=10*$level?>px">Name</a></li>

Nun möchte ich aber eine saubere Lösung und alles in Listenform (<ul>/<li>) ordentlich verschachteln, weiss aber nicht wie. Beispiel:

<ul>
  <li>1.0 - Level 0</li>
  <li>2.0 - Level 0
      <ul>
          <li>2.1 - Level 1</li>
      </ul>
  </li>
</ul>

Hat da jemand zufällig einen Code-Schnipsel für mich bzw. einen guten Ansatz? Ich komme irgendwie jedes mal durcheinander.

Danke im Voraus!
carapau

[TobiaZ]

Da brauchst du eigentlich gar kein Level. Ein sauberes CSS; welches nach "unten hin" also in die Tiefe immer mehr margin-left hat, reicht vollkommen aus.

Insgesamt scheinst du also mehr ein Darstellungsproblem als ein PHP Problem zu haben. *move*

[wahsaga]

Da brauchst du eigentlich gar kein Level. Ein sauberes CSS; welches nach "unten hin" also in die Tiefe immer mehr margin-left hat, reicht vollkommen aus.

CSS ist nicht dazu da, fehlende Struktur im HTML zu ersetzen.


@carapau - wo genau ist denn das Problem?
Eine Möglichkeit wäre, einen Gruppenwechsel zu programmieren - neue Ebene = neue Liste; Ende Ebene = Liste schliessen.

Wie man das am besten macht, kommt darauf an, wie genau du die Daten vorliegen hast. (Beispieldaten + gewünschtes Ergebnis)

[carapau]

@TobiaZ:
Um ordentlich mit CSS arbeiten zu können, benötige ich erstmal die saubere HTML Struktur.

@wahsaga:
Der Gruppenwechsel ist genau das was ich suche! Der Weg "nach unten" scheint auch nicht so schwer, da ich einfach nur prüfen muss, ob der nächste Punkt tiefer ist. Wenn ja: neue Liste.

Problematisch ist der Weg zurück. Es muss sich ja gemerkt werden, wieviele Listen wieder geschlossen werden müssen etc. Das verwirrt mich gerade ein wenig.

Gruß
carapau

[wahsaga]

Problematisch ist der Weg zurück. Es muss sich ja gemerkt werden, wieviele Listen wieder geschlossen werden müssen etc.

Nö, wozu?

Jedes Mal am Ende einer Ebene machst du deren Liste wieder zu, fertig.

[TobiaZ]

Sorry, war davon ausgegangen, dass das Markup schon steht. Wer lesen kann...

Jedes Mal am Ende einer Ebene machst du deren Liste wieder zu, fertig.

Das klappt imho nur, wenn man die Struktur schon in Objekten oder Arrays abgebildet hat. Wenn du nur ein Listenarray hast, dann musst du wahrscheinlich wohl wieder mit den Leveln arbeiten.

[carapau]

So, habs gelöst - was fünf Minuten frische Luft bewirken können...

<ul>
<?php
if ($level_next > $level_now) {
  // tiefer
  ?><li>Tiefer<ul><?
} else if ($level_next < $level_now) {
  // zurück
  ?><li>Zurück</li></ul><?
} else {
  // gleich
  ?></li><li>gleich<?
}
?>
</ul>

Kann geschlossen werden, schönes Wochenende!

[TobiaZ]

Dazu von mir noch 1-2 Fragen.

Wie kommst du an $next_level?
Schließt das dann auch die letzten Elemente korrekt?

[carapau]

Dazu von mir noch 1-2 Fragen.

Wie kommst du an $next_level?
Schließt das dann auch die letzten Elemente korrekt?

$level_now = $data[$i]['level'];
$level_prev = $data[$i-1]['level'];
$level_next = $data[$i+1]['level']; 

Schöner wäre es natürlich vorher abzufragen, ob es überhaupt ein $level_prev / $level_next geben kann. Bei mir wurden allerdings alle Elemente geschlossen und fürs Backend reichts.

[TobiaZ]

Kann mir zwar nur vorstellen, wie dein fertiger Code aussieht, aber dein Pseudo-Code lässt vermuten, dass der HTML-Code nicht korrekt ist, wenn das letzte Element z.B. auf Ebene 3 oder so ist.

[carapau]

Kann mir zwar nur vorstellen, wie dein fertiger Code aussieht, aber dein Pseudo-Code lässt vermuten, dass der HTML-Code nicht korrekt ist, wenn das letzte Element z.B. auf Ebene 3 oder so ist.

Hm, hab die Struktur mal verändert und leider hast du recht. Der letzte Punkt ist nicht immer da wo er hin gehört. Wie würdest du das lösen?

[COLOR="Red"]Lösung[/COLOR]:

...
else if ($level_next < $level_now) {
  if ($i == $data_cnt-1) {
    $level_tmp = $level_prev-$level_now;
    for ($j = 1; $j < $level_tmp; $j++) {
      echo '</ul>';    
    }
}
...