Ergebnis 1 bis 7 von 7

Thema: Brauche ich hierfür das MegaMenü?

  1. #1
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard Brauche ich hierfür das MegaMenü?

    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! :-)
    Geändert von mattes (19.10.2012 um 16:54 Uhr)

  2. #2
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

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

  3. #3
    Contao-Fan
    Registriert seit
    10.03.2011.
    Beiträge
    340

    Standard

    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.

  4. #4
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

    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.
    Geändert von mattes (23.10.2012 um 18:03 Uhr)

  5. #5
    Contao-Fan
    Registriert seit
    10.03.2011.
    Beiträge
    340

    Standard

    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

  6. #6
    Contao-Nutzer
    Registriert seit
    24.06.2009.
    Beiträge
    150

    Standard

    Hi gerritlo,

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

    Danke!

  7. #7
    Contao-Fan Avatar von lomex
    Registriert seit
    03.07.2009.
    Ort
    Werne
    Beiträge
    791
    User beschenken
    Wunschliste

    Standard

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

Aktive Benutzer

Aktive Benutzer

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

Berechtigungen

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