nav_default.html5: Responsive Menü Checkbox-Hack
Liebe Mitglieder,
ich versuche mich gerade an einem Template auf Basis von nav_default.html5, welches den Checkbox-Hack (Öffnen von Untermenüpunkten per Klick und nicht via Hover) verwendet und bis drei Menüebenen darstellen soll (natürlich gerne auch weit mehr aber sinnvoll wären bis drei ebenen).
Kennt ihr für eine Lösung für mind. drei Menüebenen, wenn in der mobilen Ansicht Checkbox-Hack verwendet werden soll?
(Das Öffnen des Menüs per Klick in einer kleinen Ansicht (Media Queries) und in der „normalen“ Ansicht via Mouse-Hover)
Ich scheitere gerade an dem Problem, wie ich unterscheiden kann, ob bei einem Punkt noch weitere Ebenen existieren oder eben nicht
Ich müsste für so ein Menü doch unterscheiden:
- keine weiteren Ebenen, dann bekommt dieser Menüpunkt einen Link (a href...) auf die Seite;
- es existieren weitere Ebenen, dann bekommt dieser Menüpunkt keinen Link aber einen „Checkbox-Hack“ (input-Element vom type="checkbox" sowie ein label-Element für die Menübeschriftung);
Eine Variante für zwei Ebenen habe ich erstellt, allerdings verwende ich hier eine Hilfsvariable $checkboxzaehler==1, weil ich genau weiß, dass bei meinem Menü der erste Punkt (Home-Button) keine weiteren Ebenen beinhaltet. Das ist bestimmt keine schöne Lösung aber sie funktioniert.
Leider ebenen nicht für alles was drei Menüebenen beinhaltet.
Wie löst Ihr die Thematik Checkbox-Hack in Contao?
Habt Ihr eine Idee?
Vielen Dank und beste Grüße
Das ist mein zwei Ebenen Versuch.
Besitzt ein Menüpunkt der zweiten Ebene aber noch weitere Unterpunkte (3. Ebene), kann ich in der kleinen/mobilen Ansicht diese Unterpunkt nicht öffnen, da jener Menüpunkt auf der zweiten Ebene ein a href/Link auf eine Seite enthält, welchen ich in diesem Fall gar nicht haben möchte.
Allerdings gibt es auch Menüpunkte in Ebene 2, welche eben keine weiteren Unterpunkte (3. Ebene) besitzen und damit einen reinen a href/Link benötigen.
PHP-Code:
<?php if ($this->level == 'level_1'): ?>
<ul class="navigation level_1">
<?php foreach ($this->items as $item): ?>
<?php $checkboxzaehler++?>
<?php if ($checkboxzaehler==1): ?>
<li>
<a href="<?= $item['href'] ?: './' ?>" class="button flaechigklickbar left10px top10px bottom10px"><?=$item['link']?></a>
</li>
<?php else: ?>
<li><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 endif; ?>
<?php endforeach; ?>
</ul>
<?php else: ?>
<?php if ($this->level == 'level_2'): ?>
<ul class="level_2">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="buttonsubmenu left10px top10px bottom10px flaechigklickbar <?= $item['class'] ?>"><span class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?>><?= $item['link'] ?></span><?= $item['subitems'] ?></li>
<?php else: ?>
<li<?php if ($item['class']) echo ' class="' . $item['class'] . ' buttonsubmenu left10px top10px bottom10px flaechigklickbar"'; ?>><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']) echo ' class="' . $item['class'] . ' buttonsubmenu left10px top10px bottom10px flaechigklickbar"'; ?><?php if ($item['accesskey']) echo ' accesskey="' . $item['accesskey'] . '"'; ?><?php if ($item['tabindex']) echo ' tabindex="' . $item['tabindex'] . '"'; ?><?php if ($item['nofollow']) echo ' rel="nofollow"'; ?><?= $item['target'] ?><?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?>><?= $item['link'] ?></a><?= $item['subitems'] ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php endif; ?>
