Grr. Da saß ich sehr auf der Leitung.
Vielen Dank.
Das ist genau der Hinweis den ich brauchte.
Falls es irgendwann jemanden interessieren und so etwas ähnliches benötigt,e hier mein Code.
Achtung ich verwende eigene CSS-Klassen, diese müsst ihr natürlich z.B: rauslöschen.
Dies sind meine Unterscheidungen:
#Es gibt keine unterpunkte mehr:
PHP-Code:
<?php if (empty($item['subitems'])) echo '<a href="'.$item['href'].'" class="button flaechigklickbar left10px top10px bottom10px">'.$item['link'].'</a>'?>
#Es gibt Unterpunkte:
PHP-Code:
<?php if (!empty($item['subitems'])) echo '<input type="checkbox" id="checkbox_toggle_first'.$checkboxzaehler.'" disabled> <label for="checkbox_toggle_first'.$checkboxzaehler.'" class="button left10px top10px bottom10px flaechigklickbar'.$item['class'].'">'.$item['link'].'</label>'?>
Diese packe ich gemeinsam in ein Listen-Element.
In der nav_default.html5, sieht dies dann (ich habe die If-Abfrage zu Active rausgelöscht) so aus:
PHP-Code:
<ul class="<?= $this->level ?>">
<?php foreach ($this->items as $item): ?>
<?php $checkboxzaehler++?>
<li<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>>
<?php if (empty($item['subitems'])) echo '<a href="'.$item['href'].'" class="button flaechigklickbar left10px top10px bottom10px">'.$item['link'].'</a>'?>
<?php if (!empty($item['subitems'])) echo '<input type="checkbox" id="checkbox_toggle_first'.$checkboxzaehler.'" disabled> <label for="checkbox_toggle_first'.$checkboxzaehler.'" class="button left10px top10px bottom10px flaechigklickbar'.$item['class'].'">'.$item['link'].'</label>'?>
<?= $item['subitems'] ?>
</li>
<?php endforeach; ?>
</ul>
$checkboxzaehler ist eine eigene Zählervariable zur eindeutigen Beschriftung der einzelnen Labels in den CSS-Klassen. Ich erhöhe und verwende ihn in der standardmäßig vorhandenen foreach-Schleife.
Tut genau das was es tun sollte.
Wenn es Unterpunkte gibt, erhält der Punkt ein Label-Element.
Wenn es keine Unterpunkte gibt, erhält der Punkt einen Link (a href).
Dies kann ich dann mittels dem Checkbox-Hack (Javascript) sowie Media Querries nutzen um in der mobilen Ansicht ein klickbares Menü zu gestalten, statt einem Menü via Mouse-Hover.
Lesezeichen