Zum Inhalt springen

Aufklappmenu mit unterschiedlichen CSS (Top- und Submenu)

Erstellt am 27. November 2007 · 7 Antworten · letzte Antwort am 28. November 2007

Tags: Frage

molekuel ·

Hi Leute,
steh grad ein wenig aufm Schlauch... Folgendes Szenarion:

Hab ein Aufklappmenu, in dem jeder Topmenu-Punkt eine andere Klasse kriegt (klappt bestens soweit). Jetzt sollten aber die Submenu-Punkte der des jeweiligen Topmenus wiederum eigene Klassen erhalten, und da komm ich grad nicht weiter.

zB
Topmenu 1 -> Blau
Submenu 1_1 -> hellblau
Submenu 1_2 -> hellblau
Submenu 1_3 -> hellblau
Topmenu 2 -> Grün
Submenu 2_1 -> hellgrün
Submenu 2_2 -> hellgrün
Submenu 2_3 -> hellgrün
etc

Also immer die zusammengehörigen Submenus dieselbe Klasse bzw ID.

Wie mach ich das am besten? Wäre froh wenn mir da jemand kurz nen Denkanstoss geben könnte.
Vielen Dank schon mal,
Manuel

Hier mal mein bisheriges Typoscript:

### Menü ###
lib.mainMenu = HMENU

## GANZES MENU MIT ENTSPRECHENDER LISTEN-DEFINITION WRAPPEN
lib.mainMenu.wrap = <ul id="menu" class="main_menu"><dl>|</dl></ul>

lib.mainMenu {

  ### Erste Ebene -> KLAPPT BESTENS ###
    1 = TMENU
    1 {

      NO {
        beforeWrap = <dt id="first">| || <dt id="second">| || <dt id="third">| ||<dt id="fourth">|
        linkWrap = |
        wrapItemAndSub = |</dt> || |</dt> || |</dt> || |</dt>
      }

      ACT > .NO
      ACT = 1
      ACT {
        beforeWrap = <dt id="first">| || <dt id="second">| || <dt id="third">| ||<dt id="fourth">|
        # ATagParams = class='active'
        wrapItemAndSub = |</dt> || |</dt> || |</dt> || |</dt>
      }
    }

   ####################################################
    ### Zweite Ebene -> Klappt noch nicht... ###

    ### ALSO hier müsste ich jeweils eine einzelne ID mitgeben, analog zum Topmenu ###

    2 = TMENU
    
    2 {
      entryLevel = 1
      wrap = <dd><ul class="sub_menu">|</ul></dd>

      NO {
        beforeWrap = <li id="first_sub">| || <li id="second_sub">| || <li id="third_sub">| ||<li id="fourth_sub">|
        linkWrap = |
        wrapItemAndSub = |</li> || |</li> || |</li> || |</li >
      }

      ACT > .NO
      ACT = 1
      ACT {
        beforeWrap = <li id="first_sub">| || <li id="second_sub">| || <li id="third_sub">| ||<li id="fourth_sub">|
        ATagParams = class='active'
        wrapItemAndSub = |</li> || |</li> || |</li> || |</li >
      }
      
    }
}

## Menu [End]
molekuel ·

HI Kitsunet,
ja natürlich, alle Submenus von Blau brauchen die gleiche Klasse bzw ID. Also:

<dt id="first"><a href="#">Eltern</a></dt>
<dd><ul class="sub_menu">
<li id="first_sub"><a href="#">sub 1</a></li>
<li id="first_sub"><a href="#">sub 2</a></li>
</ul></dd>

Unbekannter Benutzer ·

ja moment, eine ID muss einmalig sein, d.h. die dürften dann nur die gleich class bekommen, dass wiederum ist aber ja auch nicht nötig, denn z.b. mit:

#first li{

}

im CSS kannst du alle li innerhalb von #first stylen, d.h. alle Unterpunkte vom ersten Hauptpunkt...

molekuel ·

hmm, wenn ich das Topmenu so anspreche:

ul#menu  dt#first a {

wie muss ich dann das Untermenu ansprechen? So setze ich die Klasse:

ul#menu ul ul li.first_sub a {

Krieg das grad nicht auf die Reihe... Wäre froh wenn mir da jemand kurz nen tipp geben könnte!
Gruss und danke,
manuel

molekuel ·

scheint, als ob ich mit dem spezifischen CSS problem nicht weiterkomme...

Andere Frage:
ist es mit TypoScript möglich jedem Submenu-Block eine eigene Klasse mitzugeben? Also:

<dd><ul class="sub_menu">
<li class="first_sub"><a href="#">sub 1</a></li>
<li class ="first_sub"><a href="#">sub 2</a></li>
</ul></dd>

bzw.

<dd><ul class="sub_menu">
<li class="second_sub"><a href="#">sub 1</a></li>
<li class ="second_sub"><a href="#">sub 2</a></li>
</ul></dd>

Wäre extrem dankbar, wenn mir da jemand einen tipp geben könnte.
gruss, m

molekuel ·

mensch! ich sah den wald vor lauter bäumen nicht mehr, bzw sah typo3 vor lauter css nicht mehr...

ja natürlich klappt das so! hab nicht mit dem richtige parsen von typo3 gerechnet....

Vielen Dank für die gedult!
manuel