Mega-Menü mit Bildern

Ich tüftel gerade an einem Mega-Menü rum, hab auch schon verschiedene Lösungsansätze, bin aber noch nicht so wirklich zufrieden. Am Ende soll es in etwa so aussehen: https://www.wemafa.de. Bei Mouseover eines Menüpunktes der ersten Ebene soll das Megamenü mit der zweiten Navigationsebene aufgeklappt werden, und bei Mouseover über diese Menüpunkte wird jeweils ein Bild (oder evtl. TExt, das ist aber kein Muss!) angezeigt.

Bei meinen Recherchen bin ich auf folgende Erweiterungen gestoßen, bin mir aber nicht sicher, ob ich damit ohne Mega-Aufwand ;-) zum gewünschten Ergebnis komme:

• srhinow/contao-page-images-bundle & das-l/contao-page-images-navigation-bundle
• derhaeuptling/contao-mega-menu
• RockSolid Mega Menu

Hat jemand von Euch schon mal so ein Menü realisiert? Und wenn ja wie?

Zitat:

---

Zitat von Lufine

Hat jemand von Euch schon mal so ein Menü realisiert? Und wenn ja wie?

---

Realisiert schon oft aber ohne jegliche Erweiterung. Dafür reichen ein angepasstes DCA, ein modifiziertes Template und CSS. :D

Zitat:

---

Zitat von BennyBorn

Realisiert schon oft aber ohne jegliche Erweiterung. Dafür reichen ein angepasstes DCA, ein modifiziertes Template und CSS. :D

---

Hi Beni
Wie müsste das angepasst werden die DCA und das Template und das CSS. Weil mich würde das auch interessieren wie man das so baut ohne Erweiterung (CSS bin ich jetzt am lernen, hab das Buch von Peter Müller gekauft)


Gesendet von iPhone mit Tapatalk Pro

Zitat:

---

Zitat von designpilot

Wie müsste das angepasst werden die DCA und das Template und das CSS.

---

Also in der tl_page reichen ein paar Zeilen (wie man allgemein DCA's erweitert findest Du in der Doku https://docs.contao.org/manual/de/gu...ntainer-arrays)

PHP-Code:

---

// contao/dca/tl_page.php

$GLOBALS['TL_DCA']['tl_page']['fields']['navigationSRC'] = [
    'inputType'             => 'fileTree'
,   'eval'                  => ['filesOnly'=>true, 'fieldType'=>'radio', 'extensions'=>Config::get('validImageTypes'), 'tl_class'=>'clr']
,   'sql'                   => "binary(16) NULL"
]; 


---

Im Navigationstemplate kann man dann an entsprechender Stelle eine Abfrage einbauen die ungefähr so aussieht:

PHP-Code:

---

<?php if( !empty($item['navigationSRC']) ): ?>
    {{picture::<?=\StringUtil::binToUuid($item['navigationSRC'])?>?size=1&template=picture_default}}
<?php endif; ?>

---

Was das Styling mit purem CSS angeht: Für eine mehrstufige Navigation braucht man eine Möglichkeit einen Navigationspunkt "aufzuklappen". Auf Desktop ist das kein Problem, das geht einfach per Hover, Mobil ist das etwas aufwendiger.

Ich fahre da ganz gut mit dem "Checkbox-Hack" (siehe z.B. https://css-tricks.com/the-checkbox-hack/).

Die Idee ist eben man hat ein Label, das kann man gut stylen, damit triggert man eine Checkbox und per Sibling-Selector (also z.B. input:checked ~ ul) kann man dann das Untermenü anzeigen lassen.

Dazu brauchst Du in Deinem Navigationstemplate entsprechende Checkboxen und Labels, ich poste einfach mal meine "Standardlösung":

PHP-Code:

---

<ul class="<?= $this->level ?>">
    <?php foreach( $this->items as $i => $item ): ?>
        <?php $itemUniqueID = uniqid(); ?>
        <?php if( $item['isActive'] ): ?>
            <li class="<?= $item['class'] ?>">
                <?php if( !empty($item['subitems']) ):  ?>
                    <input type="checkbox" name="<?= $this->level ?>" id="<?= $itemUniqueID; ?>" checked="checked" />
                    <label for="<?= $itemUniqueID; ?>" class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="name">
                        <span><?= $item['link'] ?></span>
                    </label>
                <?php else: ?>
                    <strong class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="name">
                        <span><?= $item['link'] ?></span>
                    </strong>
                <?php endif; ?>
                <?= $item['subitems'] ?>
            </li>
        <?php else: ?>
            <li<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>>
                <?php if( !empty($item['subitems']) ):  ?>
                    <input type="checkbox" name="<?= $this->level ?>" id="<?= $itemUniqueID; ?>" <?=(strpos($item['class'],'trail') !== false)?'checked="checked"':'';?> />
                    <label for="<?= $itemUniqueID; ?>" class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="name">
                        <span itemprop="name"><?= $item['link'] ?></span>
                    </label>
                <?php else: ?>
                    <a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?><?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"'; ?> itemprop="url">
                        <span itemprop="name"><?= $item['link'] ?></span>
                    </a>
                <?php endif; ?>
                <?= $item['subitems'] ?>
            </li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>

---

Ein Beispiel-CSS kann ich Dir leider nicht liefern, das dauert zu lange bis ich das aus einer bestehenden Seite rausgefriemelt hab.

Schau Dich am besten über die Developer-Tools einfach mal auf unserer Seite um (https://www.numero2.de/) dort ist die Navi ganz ähnlich umgesetzt (gerne mit deaktiviertem JavaScript). Ansonsten findest Du dort auch ein paar Referenzprojekte, auch bei denen kommt eigentlich überall das gleiche Schema zum Einsatz :)

Danke für den Code :)

Werde in den nächsten Tagen mal ausprobieren, ob ich es hinbekomme!