Ergebnis 1 bis 5 von 5

Thema: Mega-Menü mit Bildern

  1. #1
    Contao-Nutzer
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    233
    Partner-ID
    8258

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

  2. #2
    Contao-Nutzer Avatar von BennyBorn
    Registriert seit
    10.06.2011.
    Ort
    Edenkoben
    Beiträge
    87
    Partner-ID
    6916

    Standard

    Zitat Zitat von Lufine Beitrag anzeigen
    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.

  3. #3
    Contao-Fan Avatar von designpilot
    Registriert seit
    16.06.2013.
    Ort
    9532 Rickenbach
    Beiträge
    252

    Standard

    Zitat Zitat von BennyBorn Beitrag anzeigen
    Realisiert schon oft aber ohne jegliche Erweiterung. Dafür reichen ein angepasstes DCA, ein modifiziertes Template und CSS.
    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

  4. #4
    Contao-Nutzer Avatar von BennyBorn
    Registriert seit
    10.06.2011.
    Ort
    Edenkoben
    Beiträge
    87
    Partner-ID
    6916

    Standard

    Zitat Zitat von designpilot Beitrag anzeigen
    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

  5. #5
    Contao-Nutzer
    Registriert seit
    27.11.2009.
    Ort
    Bremen
    Beiträge
    233
    Partner-ID
    8258

    Standard

    Danke für den Code

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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •