Haupt- + Submenu: HAuptmenu "verlängern"

Hallo Leute,

ich habe vom Grafiker eine echte Kopfnuss aufbekommen.
Der hat ein 2-spaltiges Menü gebaut (1. Spalte: Hauptmenü, 2. Spalte: Submenu). Dazu ist das Menü noch in mehrere Sektionen aufgetrennt:

Bild: lx-networks.de/…/seitenbaum.png

Und so sieht das im Frontend aus (border nur zur Verdeutlichung):

Bild: lx-networks.de/…/submenu_abs.png

Ich dachte, dass das doch mit einem einzigen Menü hinzubekommen sein muss, was prinzipiell auch funktioniert. Aber:

Den Container des Submenüs muss ich per "position: absolute" festzurren, da er immer oben rechts unter der Sektions-Überschrift (dkl-blaue Box) hängen muss.
Folglich deht der Container des Submenüs nicht mehr die graue Menübox und ragt bei zu vielen Sub-Menüpunkten über die darunterliegende Sektions-Überschrift.

Meine Idee: Auslesen, wieviele Menüpunkte das Submenü hat und das Hauptmenü um die erforderliche Anzahl an Blindgrafiken erweitern, sobald es aktiv ist.

Wie kann ich das aber hinbekommen? Hat jmd. eine bessere Idee?

Mein Typoscript dazu sieht so aus:

# Hauptmenü
###########  
lib.mainnavi = HMENU
lib.mainnavi {
  special = directory
  special.value = 1
  entryLevel = 1
  excludeUidList = 3, 44
  1 = TMENU
  1 {
    expAll = 1
    noBlur = 0
    NO {
      linkWrap = <div class="menuHead" style="clear: both;"> | </div>
      noBlur =1
      doNotLinkIt = 1
    }
  }
  2 = GMENU
  2 {
    #wrap = <div class="menuWrap"><ul class="hauptnavi">|</ul></div>
    wrap = <div class="menuWrap" style="border: 1px solid red;">|</div>
    noBlur = 0
    NO {
      wrap = | <br />
      XY = [10.w]+2, 49
      align = left
      backColor = #F3F3F3
      transparentBackground = 1
      noBlur = 0
     
      10 = TEXT
      10 {
        text.field = title
        fontFile = fileadmin/templates/fonts/MetaOT-Book.pfb
        fontColor = #60a1ff
        fontSize = 16
        niceText = 0
        align = left
        offset = 0,30
      }
    }
    RO = 1
    RO {
      wrap = | <br />
      XY = [10.w]+2, 49
      align = left
      backColor = #F3F3F3
      transparentBackground = 1
      noBlur = 0
     
      10 = TEXT
      10 {
        text.field = title
        fontFile = fileadmin/templates/fonts/MetaOT-Book.pfb
        fontColor = #000000
        fontSize = 16
        niceText = 0
        align = left
        offset = 0,30
      }
    }
    CUR = 1
    CUR < .RO
    ACT = 1
    ACT < .RO
  }
  3 = GMENU
  3 < .2
  3 {
    #wrap = <ul class="subnavi">|</ul>
    wrap = <div class="subnavi" style="border: 1px dotted black;">|</div>
    noBlur = 0
    NO {
      wrap = | <br />
      XY = [10.w]+2, 49
      align = left
      backColor = #F3F3F3
      transparentBackground = 1
      noBlur = 0
     
      10 = TEXT
      10 {
        text.field = title
        fontFile = fileadmin/templates/fonts/MetaOT-Book.pfb
        fontColor = #000000
        fontSize = 16
        niceText = 0
        align = left
        offset = 0,30
      }
    }
    RO = 1
    RO {
      wrap = | <br />
      XY = [10.w]+2, 49
      align = left
      backColor = #F3F3F3
      transparentBackground = 1
      noBlur = 0
     
      10 = TEXT
      10 {
        text.field = title
        fontFile = fileadmin/templates/fonts/MetaOT-Book.pfb
        fontColor = #60a1ff
        fontSize = 16 
        niceText = 0
        align = left
        offset = 0,30
      }
    }
    CUR = 1
    CUR < .RO
  }
}

(Die Überschneidung des Sub- mit dem Hauptmenü ist erstmal kein Problem, da die Schriftgröße sowie die Bezeichnungen der Menüpunkte sich noch ändern.)

Vielen Dank für eure Hilfe.

Grüße
Jehu

Ok. Idee:

Ich könnte auslesen, in welchem Menüpunkt ich mich befinde und die class des Submenü-Divs entsprechend schreiben.

Beispiel:
---------

"Einzel & Großhandel" (Menüebene 1)
Kostüme = #1 (Menüebene 2)
<div class="sub1"> (Menüebene 3)
Kinder
Familien
...
</div>
Kostümzubehör = #2 (Menüebene 2)
<div class="sub2"> (Menüebene 3)
Punkt 1
Punkt 2
...
</div>
Stoffe = 3 (Menüebene 2)
Schminke = 4 (Menüebene 2)

So, nur wie zähle ich nun die Menüeinträge?

lib.mainnavi = HMENU
lib.mainnavi {

  special = directory
  special.value = 1

  1 = TMENU
  1 {
           -> Sektion: Immer wenn neue Sektion beginnt: Zähler auf "0"
  }

  2 = GMENU
  2 {
            -> Menüpunkte durchzählen
  }
  
  3 = GMENU
  3 {
            -> hier müsste im wrap die Nummer der übergeordneten Menüeintrags rein
  }   
}

So könnte ich den Containder des 3. Menüs relativ positionieren und anhand der CSS-Klasse gesondert behandeln.

Leider bekomme ich es nicht hin. Habe rausgefunden, dass man mit LOAD_REGISTER einen zähler bauen kann. Aber wie?

Bitte helft mir...

So,
habe die Sache nun gelöst, indem ich einfach 6 getrennte Menüs generiere und die Sektionen quasi fest in die Design-Vorlage einbaue (was ich ja eigentlich umgehen wollte).
Durch die Condition [PIDinRootline = XX] wird das jeweilige Submenü nur eingeblendet, wenn es ein Menüpunkt aus dem darüberliegenden Hauptmenü aktiviert wurde.

Es war eine lange Bastelei (weil ich erst auf der "Ein-HMENU-Menü-Tatkik" beharren wollte), aber hier mein Ergebnis (das erschreckend einfach aussieht):

# Hauptmenü
##############
temp.mainnavi = HMENU
temp.mainnavi {
  special = directory
  1 = GMENU
  1 {
    wrap = <ul class="hauptnavi">|</ul>
    noBlur = 0
    NO {
      wrap = <li>|</li>
      XY = [10.w]+2, 49
      align = left
      backColor = #F3F3F3
      transparentBackground = 1
      noBlur = 0
     
      10 = TEXT
      10 {
        text.field = title
        fontFile = fileadmin/templates/fonts/MetaOT-Book.pfb
        fontColor = #60a1ff
        fontSize = 16
        niceText = 0
        align = left
        offset = 0,30
      }
    }
    RO = 1
    RO {
      wrap = <li>|</li> 
      XY = [10.w]+2, 49
      align = left
      backColor = #F3F3F3
      transparentBackground = 1
      noBlur = 0
     
      10 = TEXT
      10 {
        text.field = title
        fontFile = fileadmin/templates/fonts/MetaOT-Book.pfb
        fontColor = #000000
        fontSize = 16
        niceText = 0
        align = left
        offset = 0,30
      }
    }
    CUR = 1
    CUR < .RO
    ACT = 1
    ACT < .RO
  }
}  

# Submenü
##########
#temp.subnavi < .temp.mainnavi
temp.subnavi = HMENU
temp.subnavi {
  entryLevel = 3
  
  1 = GMENU
  1 {
    wrap = <ul class="subnavi">|</ul>
    noBlur = 0
    NO {
      wrap = <li>|</li>
      XY = [10.w]+2, 49
      align = left
      backColor = #F3F3F3
      transparentBackground = 1
      noBlur = 0
     
      10 = TEXT
      10 {
        text.field = title
        fontFile = fileadmin/templates/fonts/MetaOT-Book.pfb
        fontColor = #60a1ff
        fontSize = 16
        niceText = 0
        align = left
        offset = 0,30
      }
    }
    RO = 1
    RO {
      wrap = <li>|</li>
      XY = [10.w]+2, 49
      align = left
      backColor = #F3F3F3
      transparentBackground = 1
      noBlur = 0
     
      10 = TEXT
      10 {
        text.field = title
        fontFile = fileadmin/templates/fonts/MetaOT-Book.pfb
        fontColor = #000000
        fontSize = 16
        niceText = 0
        align = left
        offset = 0,30
      }
    }
    CUR = 1
    CUR < .RO
    ACT = 1
    ACT < .RO
  }
}

# Hauptmenü 1
##############
lib.mainnavi1 < .temp.mainnavi
lib.mainnavi1 {
  special.value = 37
}
# Hauptmenü 2
##############
lib.mainnavi2 < temp.mainnavi
lib.mainnavi2 {
  special.value = 40
}
# Hauptmenü 3
##############
lib.mainnavi3 < temp.mainnavi
lib.mainnavi3 {
  special.value = 41
}


# Submenü 1
##############
#lib.subnavi1 >
[PIDinRootline = 37]
lib.subnavi1 < .temp.subnavi
[global]

# Submenü 2
##############
#lib.subnavi2 >
[PIDinRootline = 40]
lib.subnavi2 < .temp.subnavi
[global]

# Submenü 3
##############
#lib.subnavi3 >
[PIDinRootline = 41]
lib.subnavi3 < .temp.subnavi
[global]

Und hier der CSS-Code:

ul.hauptnavi {
  list-style-type: none;
  float: left;
  margin: 0 0 0 32px;
  padding: 0;
  width: 100px;
  z-index: 10;
}
ul.hauptnavi li a {
  display: block;
}

ul.subnavi {
  position: relative;
  z-index: 5;
  float: right;
  width: 150px;
  list-style-type: none;
  margin:0 35px 0 0;
  padding: 0;
  text-align:right;
}
ul.subnavi li a{
  display: block;
}

Wusste doch, dass mit Typo3 nix unmöglich ist. 😃
Bin natürlich weiterhin für Alternativ-Vorschläge offen. 😉

Grüße
Jehu