Brauche ich hierfür das MegaMenü?

[mattes]

Hallo Zusammen,

ich muss eine Navigation umsetzen die wie folgt aussehen soll:
navigation.png

Bei den Sub-Menüs sollen die Unterpunkte ab einer gewissen Höhe rechts nebeneinander dargestellt werden, wie im Bild zu sehen.

Kann ich so etwas nur mit dem MegaMenü realisieren oder klappt das auch anders?


Wie immer Danke! :-)

[mattes]

Hat wirklich keiner ne Ahnung wie ich so eine Navigation hinbekomme???

[gerritlo]

Hallo mattes,

ich weiß zwar nicht, was das megamenü ist, aber das sollte auch nur mit CSS gehen. Du lässt dir einfach alle drei Ebenen vom Navigationsmenü ausgeben. Dann machst du die li von level_1 float:left und position:relative. Bei li.level_2 machst du auch float:left und level_3 bleibt als Display:Block. Wichtig ist, dass level_2 Position:absolut bekommt und level_3 wieder relative.

[mattes]

Hi gerritlo,

danke für deine Antwort! :-)

Du sprichst von drei Navigationsebnen, allerdings habe ich nur zwei. Die zweite Ebene sollten in einem Container erscheinen der wiederum eine feste Höhe hat, breite dynamisch. Sehe dir das Bild bitte noch mal genauer an.

[gerritlo]

Okay, sorry... Wenn du nur zwei Ebenen hast, gilt das, was ich oben beschrieben habe, auch. ;-)

Du musst glaube ich nur das Template für die Navigation anpassen. Normalerweise werden alle Einträge einer ebene nur als ul-li-Kombination gerendert. Du müsstest das Template so aufteilen, dass du in einem ul in level_2 nun immer nur x Elemente gepackt werden. Immer wenn x Elemente erreicht sind, machst du ein neues ul-Element auf. Die kannst du dann float left machen, damit sie nebeneinander stehen.

Grüße

[mattes]

Hi gerritlo,

hast du vielleicht irgendwo ein Beispiel dafür?
Mit Navigationen stehe ich IMMER irgendwie auf Kriegsfuss! ;-)

Danke!

[lomex]

Du legst unter Templates ein neues nav_default Template an. Beispiel html5-Template aus 2.11:

Dem ersten Element der neuen Spalte gibst du ein schließendes und ein öffnendes ul-Element. Der Rest ist CSS.
So könnte es gehen. Ist aber ungetestet.

<?php $anzElementeProSpalte = 5; $counter=0; ?>

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php $counter++; ?>
<?php if ($counter % $anzElementeProSpalte == 1): ?>
</ul><ul>
<?php endif; ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>