Dropdown Menü - Subitems

Hey Leute!

Ich versuche ein dropdown menü. Ich habe ein Modul "Navigationsmenü" erstellt und das template nav_default.html5 in meinen templates ordner gelegt um es zu überschreiben.
dort loope ich wie gewöhnlich durch die items meiner seiten und möchte auch die unterseiten mit $item['subitems']; ausgeben.
hier gleich meine erste frage: wird für jeden eintrag in subitems das template wieder aufgerufen? sieht nämlich so aus..
wie kann ich das verhindern bzw ein eigenes template dafür angeben?

bzw, meine eigentlcih frage: wie ist die übliche herangehensweise, wenn man so ein menü basteln will?
und ja, ich kenne die seite http://de.contaowiki.org/ModulNavigation ;)

danke und lg

Moinsen,


ich würde das Dropdown rein auf CSS-Basis bauen.
Funktioniert auch mit dem Standard-Menü-Template.

Greetz

Hallo humpdi,

schau mal hier: https://contao.org/en/extension-list...opdown.en.html
Das macht dir dein Vorhaben sicher einfacher.

:)

Viele Grüße
MiTsch

Danke Leute!
Und wie funktioniert das jetzt mit den Subitems? :)

Und bei dieser Extension steht:
Contao von 2.9.4 stable bis 2.11.4 stable

Wir haben aber mittlerweile 3.1...

Versuch es hiermit: http://de.contaowiki.org/Suckerfishalternative

wissen wir jetzt schon ob ich die subitems in einem eigenen template rendern kann oder ob da immer das vom hauptlevel aufgerufen wir für jedes element?

Klar wissen wir das schon: Ja, das Template wird für jede Ebene aufgerufen (und ich bin ein wenig erstaunt, dass Dir das nicht selber aufgegangen ist).

Aber wo is das Problem .. Du kannst doch die Klasse der UL abfragen (level_1, level_2 etc), und abhängig davon die Ausgabe (if, else und sowas) gestalten. Mehr braucht es nicht.

@ humpdi,
ich weiß auch das wir schon 3.x haben aber ich weiß nicht welche Version du verwendest!
Sorry, ich wollte dir nur bei DEINEM Problem helfen.

MiTsch

Hatte auch anfangs Probleme mit dem Dropdown (lag aber daran dass ich einfach neu war) bin zu superfish umgestiegen (hatte da auch ein kleines Problem mit aber vom Autor wurde mir direkt geholfen).

Mein navi Workflow: Theme importieren, css ändern, fertig :) j/k


Superfish installieren.
Modul erstellen. (start:0, Stop:0)(Template erstellen und einbinden)
Css erstellen.
Layout -> css´ aktivieren, Modul einbinden, superfish aktivieren (&ggf einstellen)

Sollte eigentlich reichen.

Zitat:

---

Zitat von Bas

Klar wissen wir das schon: Ja, das Template wird für jede Ebene aufgerufen (und ich bin ein wenig erstaunt, dass Dir das nicht selber aufgegangen ist).

Aber wo is das Problem .. Du kannst doch die Klasse der UL abfragen (level_1, level_2 etc), und abhängig davon die Ausgabe (if, else und sowas) gestalten. Mehr braucht es nicht.

---

es ist mir natürlich aufgefallen. ich dachte nur vielleicht gibt es eine möglichkeit ein extra template für die submenüs bereitzustellen, da contao ja auch sonst so generisch gehalten ist.

das ding ist nämlich, das der level-1 meines menüs sehr individuell gestaltet werden muss - daher hat in der designvorlage jeder menüpunkt seine eigene id.
wenn ich das jetzt generisch runterrattern lasse von contao hab ich zwar überall nett klassen drinnen und auch first, last und so weiter aber ich muss mich dann eeeewig umständlich mit javascript durchwühlen um jeden element seinen individuellen style zuzuordnen - da contao mir ja keine ids zum direkt ansprechen liefert.

also irgendwie alles ein bissl umständlich und unnötig kompliziert, dafür das ich nur ein simples menü raushauen will, und das ein bisschen stylen.

Zitat:

---

Zitat von humpdi

... ich muss mich dann eeeewig umständlich mit javascript durchwühlen um jeden element seinen individuellen style zuzuordnen - da contao mir ja keine ids zum direkt ansprechen liefert.

---

Sofern Du Deine Klassen nicht doppelt vergibst, kannst Du Deine Links doch eindeutig über die Klassen ansprechen. Warum müssen es unbedingt IDs sein?
Aber selbst wenn es IDs sein müssten, kannst das doch im Template regeln - also den Klassenstring aufsplitten, und dann Deine ID setzen.

Ich versteh Dein Problem nicht. :(

Edit: Ist Dir bewusst, das Du den Seiten in der Seitenstruktur eine Klasse zuweisen kannst, welche Du dann bei den Links der Navigation (ausserdem noch in den umgebenden LIs und dem Body) wiederfindest?

danke für den tipp!

ich muss jedes element einzeln ansprechen, da die alle einen bestimmten abstand haben..
aber ich denke ich weiß schon wie ichs mache, ich editiere das nav-template dahingehend das ich jedem li eine id gebe abhängig von dem php-loopindex.. damit sind sie eindeutig und ich kann jedem ein eigenes css zuweisen.

merci.

Man kann es sich auch kompliziert machen ... :confused:

Verrat mir nur kurz warum es unbedingt IDs sein müssen und Dir die Klassen (die Du in der Seitenstruktur zuweist) nicht ausreichen.

ja gerne, ich bin ja froh wenn ich nur umständlich denke und mir jemande eine bessere lösung anbietet :)

folgende definitonen verwende ich:

Code:

---

  #kp_header_menu_li_1 { margin-right: 63px; }
  #kp_header_menu_li_2 { margin-right: 160px; }
  #kp_header_menu_li_4 { margin-left: 125px; margin-top: 5px; }
  #kp_header_menu_li_5 { margin-left: 75px; margin-top: 5px; }
  #kp_header_menu_li_6 { margin-left: 70px; margin-top: 5px; }

---

das heißt, die einzelnen hauptmenüeinträge sind unterschiedlich weit voneinander entfernt (liegen auf einem hintergrundbild vom kunden), und es gibt 2 zeilen.

contao bietet mir das hier an:

Code:

---

<ul class="level_1">
  <li class="sibling first">
  <li class="sibling">
  <li class="sibling">
  <li class="active submenu">
    <span class="active submenu"> Leistungen </span>
    <ul class="level_2">
  </li>
  <li class="submenu sibling">
  <li class="submenu sibling last">
</ul>

---

die einzige möglichkeit die mir einfällt, die siblings miteinander in die entsprechende position zu bringen ist, mit javascript durchzuloopen.
die level_2 uls möchte ich (ebenfalls mit javascript) verstecken und beim entsprechenden mouseover anzeigen..

was meinst du dazu, ist das ein guter ansatz, oder gibts was logischeres? :)

danke für deine mühe!

wenn du den seiten in der seitenstruktur eine klasse zuweist, wird diese auch in den menuepunkten ausgegeben und kannst damit die menuepunkte ansprechen.

was willst du mit js loopen?

Gesendet von meinem GT-I9505 mit Tapatalk 2

Zitat:

---

Zitat von humpdi

was meinst du dazu, ist das ein guter ansatz, oder gibts was logischeres?

---

Sorry, aber Dein Ansatz ist wirklich schlecht, und zeigt das Dir jede Menge Basiswissen fehlt.
---

Als erstes gibst Du den Links Klassen und dem Navigationsmodul eine ID .. dann sieht die Navigationsausgabe z.B. so aus:

Code:

---

<nav class="mod_navigation block" id="DeineNavID">
<ul class="level_1">
        <li class="klasse1 first">
                <span class="klasse1 active first">#</span>
        </li>
        <li class="klasse2 submenu sibling">
                <a href="#" title="Unternehmen" class="klasse2 submenu sibling">#</a>
                <ul class="level_2">
                        <li class="klasse2a first">
                                <a href="#" title="#" class="klasse2a first">#</a>
                        </li>
                        <li class="klasse2b last">
                                <a href="#" title="#" class="klasse2b last">#</a>
                        </li>
                </ul>
        </li>
        <li class="klasse3 sibling last">
                <a href="kontakt.html" title="Kontakt" class="klasse3 sibling last">Kontakt</a>
        </li>
</ul>
</nav>

---

Die Klassen "klasse1", "klasse2", .... (und natürlich auch die ID "DeineNavID") kannst Du frei zuweisen.

Nun kannst Du jeden Link eindeutig ohne jede Templateänderung adressieren.
Also anstatt:
#kp_header_menu_li_1 { margin-right: 63px; }
#DeineNavID a.klasse1 { margin-right: 63px; }
oder wenn Du die LI ansprechen willst: #DeineNavID li.klasse1 { margin-right: 63px; }

Ich hoffe ich konnte helfen.