nav_default.html5: Responsive Menü Checkbox-Hack

[seamuc]

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 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; ?>

[seamuc]

Oder:

Wie kann ich denn Abfragen, wenn der Navigationsaufbau gerade in Ebene 2/Level 2 steckt

$this->level == 'level_2' 

ob es dann noch eine weitere Ebene (level_3) darunter existiert?

[tab]

Ich denke, eine passende Abfrage auf Unterpunkte wäre

<?php if (!empty($item['subitems']))...

So macht es ja auch das Originaltemplate, siehe hier ...

<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?>

[seamuc]

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 if (empty($item['subitems'])) echo '<a href="'.$item['href'].'" class="button flaechigklickbar left10px top10px bottom10px">'.$item['link'].'</a>'?>

#Es gibt Unterpunkte:

<?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:

<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.