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
Lesezeichen