DroplineMenu 3zeilig

Hi,

gibt es hier jemanden, der schon mal ein 3-zeiliges Dropline Menu realisiert hat? Ich hab mich
mal dran gemacht und ein zweizeiliges Dropline Menu erweitert, doch es will nicht so ganz mit
der 3. Zeile. Irgendwie kann ich die 3. Ebene nicht linksbündig darstellen. Sie rutscht momentan
mit jedem Menüpunkt der 2. Ebene nach rechts. Mir scheint als ob das an einem div liegt, den ich nicht
richitg eingebunden hab, oder evtl. sollte noch einer dazu. Oder liegt es eher am CSS?

Anbei mein TSCode

  lib.navigation = HMENU
    lib.navigation.special = directory
    lib.navigation.special.value = 107
    lib.navigation {
      wrap = <ul id="dropline">|</ul>
      
      1 = TMENU
      1 {
        expAll = 1
        noBlur = 1
        NO.ATagTitle.field = subtitle//title
        NO.wrapItemAndSub =  <li> | </li>|*| <li> | </li> |*| <li class="last"> | </li>
        CUR = 1
        CUR.allWrap = <li class="current">
   
        IFSUB = 1
        IFSUB {
          ATagTitle.field = subtitle//title
          wrapItemAndSub =  <li class="first"> | </li>|*| <li> | </li> |*| <li class="last"> | </li><br>
          allWrap = | <!--<![endif]-->
          linkWrap = |<!--[if gte IE 7]><!-->
          ATagBeforeWrap = 1
        }
        ACT < .NO
        ACT = 1
        ACTIFSUB < .IFSUB
        ACTIFSUB.wrapItemAndSub = <li class="current">
      }
      2 = TMENU
      2 {
        wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><div><ul>|</ul></div><!--[if lte IE 6]></td></tr></table></a><![endif]-->  
        expAll = 1
        noBlur = 1
        NO.ATagTitle.field = subtitle//title
        NO.wrapItemAndSub = <li class="first"> | </li>|*| <li> | </li> |*| <li class="last"> | </li>
        CUR = 1
        CUR.allWrap = <li class="current_sub">
        IFSUB = 1
        IFSUB {
          wrapItemAndSub = <li class="first"> | </li>|*| <li> | </li> |*| <li class="last"> | </li><br>
          allWrap = | <!--<![endif]-->
          linkWrap = |<!--[if IE 7]><!-->
          ATagBeforeWrap = 1
        }
        ACT < .No
        ACT = 1
        ACTIFSUB < .IFSUB
        ACTIFSUB.wrapItemAndSub = <li class="current_sub">
      }
 
      3 < .2
      3 {
        CUR = 1
        CUR.allWrap = <li class="current_subsub">
      }
      4 < .2
 
    }

#dropline {padding:0; margin:0; list-style:none; float:left; position:relative; right:0%; width:720px;}
#dropline li div {position:absolute; left:-9999px; width:100%; z-index:10; height:35px; border-top:4px solid #e60; top:35px; background:#fff;}
#dropline ul {padding:0; margin:0; list-style:none;}
#dropline table {border-collapse:collapse: padding:0; margin:-1px -10px; width:0; height:0;}

#dropline li ul {position:relative; float:left; left:0%;}
#dropline li ul li {float:left; position:relative; right:0%;}
#dropline li ul li a {display:block; float:left; padding:0 10px; background:transparent; color:#000; font-weight:bold;}
#dropline li ul li a:hover {text-decoration:underline; background:transparent; color:#000;}

#dropline li {float:left; margin-right:1px;}
#dropline li.last {margin-left:1px;}
#dropline li a {display:block; float:left; height:35px; padding:0 0 0 20px; line-height:30px; text-decoration:none; font-family:"trebuchet MS", sans-serif; font-size:13px; text-decoration:none; color:#000; background:url(button-off.png);}
#dropline li a b {display:block; float:left; height:35px; padding:0 20px 0 0; background:url(button-off.png) right top; cursor:pointer;}

#dropline li a:hover {background:url(button-over.png); color:#fff; border:0;}
#dropline li a:hover b {background:url(button-over.png) right top;}

#dropline li:hover > a {background:url(button-over.png); color:#fff; border:0;}
#dropline li:hover > a b {background:url(button-over.png) right top;}

#dropline :hover div {left:0;}

#dropline li.current a,
#dropline li.current a:hover {background:url(button-select.png); color:#fff; font-weight:bold;}
#dropline li.current a b,
#dropline li.current a:hover b {background:url(button-select.png) right top; color:#fff;}

#dropline li.current a:hover ul li a:hover {color:#000; background:transparent;}
#dropline li.current:hover ul li a:hover {color:#000; background:transparent;}

#dropline li.current div {width:720px; left:0%; top:35px; background:#fff; z-index:5;}
#dropline li.current ul {position:relative; float:left; left:0px;}
#dropline li.current ul li {float:left; position:relative; right:0%;}
#dropline li.current ul li a {display:block; float:left; padding:0 0px; background:transparent; color:#000; font-weight:bold;}
#dropline li.current ul li.current_sub div {width:720px; left:0px; top:35px; background:#fff; z-index:5;}
#dropline li.current ul li.current_sub a {display:block; float:left; padding:0 0px; background:transparent; color:#c00; text-decoration:underline;}
#dropline li.current ul li.current_sub a:hover {text-decoration:underline; background:transparent; color:#c00;}
#dropline li.current ul li.current_sub ul {position:relative; float:left; left:00%;}
#dropline li.current ul li.current_sub ul li {float:left; position:relative; right:0%;}
#dropline li.current ul li.current_sub ul li a {display:block; float:left; padding:0 10px; background:transparent; color:#000; font-weight:bold; text-decoration: none;}
#dropline li.current ul li.current_sub ul li.current_subsub a {display:block; float:left; padding:0 10px; background:transparent; color:#c00; text-decoration:underline;}
#dropline li.current ul li.current_sub ul li.current_subsub a:hover {text-decoration:underline; background:transparent; color:#c00;}

* html #dropline li.current div {width:expression(document.getElementById('dropline').offsetWidth);}
* html #dropline li a:hover div {width:expression(document.getElementById('dropline').offsetWidth);}

Hi,

ich bins nochmal. Anbei die fertige Lösung für alle die ein Dropline-Menu 3-zeilig bzw. 4-zeilig mögen. Kann eigentlich ohne weiteres erweitert werden. Einfach für jede weitere Ebene eine Ebene im Typoscript hinzufügen und die CSS-Tags in dem CSS-Teil mit den nötigen Attributen ergänzen.
Vielleicht nutzt es ja jemandem. :-)

   lib.navigation = HMENU #lib.navigation mit TV gemappter TyposcriptObjectPath
    lib.navigation.special = directory
    lib.navigation.special.value = 107 #Wert der beginnenden Seiten-UID für das Menü
    lib.navigation {
      wrap = <ul id="dropline">|</ul>
      
      1 = TMENU
      1 {
        wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><div><ul>|</ul></div><!--[if lte IE 6]></td></tr></table></a><![endif]-->
        expAll = 1
        noBlur = 1
        stdWrap.prepend = TEXT #Def. für Grossbuchstaben
        stdWrap.case = upper   #     
        NO.ATagTitle.field = subtitle//title
        NO.
        NO.wrapItemAndSub =  <li> | </li>|*| <li> | </li> |*| <li class="last"> | </li>
        CUR = 1
        CUR.allWrap = <li class="current">
    
        IFSUB = 1
        IFSUB {
          ATagTitle.field = subtitle//title
          wrapItemAndSub =  <li class="first"> | </li>|*| <li> | </li> |*| <li class="last"> | </li><br>
          allWrap = | <!--<![endif]-->
          linkWrap = |<!--[if gte IE 7]><!-->
          ATagBeforeWrap = 1
        }
        ACT < .NO
        ACT = 1
        ACTIFSUB < .IFSUB
        ACTIFSUB.wrapItemAndSub = <li class="current">
      }
      2 = TMENU
      2 {
        wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><div><ul>|</ul></div><!--[if lte IE 6]></td></tr></table></a><![endif]-->  
        expAll = 1
        noBlur = 1
        NO.ATagTitle.field = subtitle//title
        NO.wrapItemAndSub = <li class="first"> | </li>|*| <li> | </li> |*| <li class="last"> | </li>
        CUR = 1
        CUR.allWrap = <li class="current_sub">
        IFSUB = 1
        IFSUB {
          wrapItemAndSub = <li class="first"> | </li>|*| <li> | </li> |*| <li class="last"> | </li><br>
          allWrap = | <!--<![endif]-->
          linkWrap = |<!--[if IE 7]><!-->
          ATagBeforeWrap = 1
        }
        ACT < .No
        ACT = 1
        ACTIFSUB < .IFSUB
        ACTIFSUB.wrapItemAndSub = <li class="current_sub">
      }
 
      3 < .2
      3 {
        CUR = 1
        CUR.allWrap = <li class="current_subsub">
      }
      4 < .2

#dropline {padding:0; margin:0; list-style:none; float:left; position:relative; right:0%; width:720px;}
#dropline div {position:absolute; left:0px; width:100%; z-index:10;}
#dropline li div {position:absolute; left:-9999px; width:100%; z-index:10; height:35px; border-top:2px solid #9c9d9f; top:35px; background:#fff;}
#dropline ul {padding:0; margin:0; list-style:none;}
#dropline table {border-collapse:collapse: padding:0; margin:-1px -10px; width:0; height:0;}

#dropline li ul {position:relative; float:left; left:0%;}
#dropline li ul li {float:left;}
#dropline li ul li a {display:block; float:left; padding:0 10px; background:transparent; color:#000; font-weight:semibold;}
#dropline li ul li a:hover {text-decoration:underline; background:transparent; color:#000;}

#dropline li {float:left; margin-right:1px;}
#dropline li.last {margin-left:1px;}
#dropline li a {display:block; float:left; height:35px; padding:0 0 0 20px; line-height:30px; text-decoration:none; font-family:"Verdana", sans-serif; font-size:13px; text-decoration:none; color:#000; background:url(button-off.png);}
#dropline li a b {display:block; float:left; height:35px; padding:0 20px 0 0; background:url(button-off.png) right top; cursor:pointer;}

#dropline li a:hover {background:url(button-over.png); color:#fff; border:0;}
#dropline li a:hover b {background:url(button-over.png) right top;}

#dropline li:hover > a {background:url(button-over.png); color:#fff; border:0;}
#dropline li:hover > a b {background:url(button-over.png) right top;}

#dropline :hover div {left:0;}

#dropline li.current a,
#dropline li.current a:hover {background:url(button-select.png); color:#fff; font-weight:semibold;}
#dropline li.current a b,
#dropline li.current a:hover b {background:url(button-select.png) right top; color:#fff;}

#dropline li.current a:hover ul li a:hover {color:#000; background:transparent;}
#dropline li.current:hover ul li a:hover {color:#000; background:transparent;}

#dropline li.current div {width:720px; left:0%; top:35px; background:#fff; z-index:5;}
#dropline li.current div ul li div ul {position:absolute; left:-9999px; width:100%; z-index:10; height:35px; background:#fff;}
#dropline li.current div ul li.current_sub div ul li div {position:absolute; left:-9999px; width:100%; z-index:10; height:35px; background:#fff;}
#dropline li.current div ul li.current_sub div ul li.current_subsub div {float:left; left:0px;}
#dropline li.current ul {float:left; left:0px;}
#dropline li.current ul li {float:left;}
#dropline li.current ul li a {display:block; float:left; padding:0 10px; background:transparent; color:#000; font-weight:semibold;}
#dropline li.current ul li.current_sub a {display:block; float:left; padding:0 0px; background:transparent; color:#c00;}
#dropline li.current ul li.current_sub a:hover {text-decoration:underline; background:transparent; color:#c00;}
#dropline li.current ul li.current_sub ul {position:relative; float:left; left:00%;}
#dropline li.current ul li.current_sub ul li {float:left;}
#dropline li.current ul li.current_sub ul li a {display:block; float:left; padding:0 10px; background:transparent; color:#000; font-weight:semibold; text-decoration: none;}
#dropline li.current ul li.current_sub ul li.current_subsub a {display:block; float:left; padding:0 10px; background:transparent; color:#c00; text-decoration:underline;}
#dropline li.current ul li.current_sub ul li.current_subsub a:hover {text-decoration:underline; background:transparent; color:#c00;}
#dropline li.current ul li.current_sub ul li ul {position:absolute; left:-9999px; width:100%; z-index:10; height:35px; background:#fff;}
#dropline div ul li.current div ul li.current_sub div ul li.first div ul {position:absolute; left:-9999px; width:100%; z-index:10; height:35px; background:#fff;}
#dropline div ul li.current div ul li.current_sub div ul li.current_subsub div ul a {display:block; float:left; padding:0 10px; background:transparent; color:#c00; text-decoration:underline;}
#dropline div ul li.current div ul li.current_sub div ul li.current_subsub div ul a:hover {text-decoration:underline; background:transparent; color:#c00;}
#dropline div ul li.current div ul li.current_sub div ul li.current_subsub div ul {float:left; left:0px;}

* html #dropline li.current div {width:expression(document.getElementById('dropline').offsetWidth);}
* html #dropline li a:hover div {width:expression(document.getElementById('dropline').offsetWidth);}

Hi,

ich bins nochmal. Ich möchte mein schönes Dropline-Menü noch etwas verfeinern und zwar möchte ich der li class="last" der 2., 3. und 4. Ebene noch eine dynamische Breite mitgeben. Der Zweck dazu ist, dass ich in dem übergeordneten Div mit einer Breite von 980px eine horizonale Linie habe. Nun möchte ich diese aber für jedes aktive Element gern unterbrechen. Mein Lösungsansatz war nun, dass ich jedem Menu li eine horizontale Linie im Button mitgebe. Funktioniert auch super. Leider fehlt mir nach dem letzten Menüpunkt die Linie, weil sie ja nicht bis zum rechten Rand reicht, je nachdem wieviele Menüpunkte eine Ebene hat. Deshalb eben die dynamische Breite für das letzte li-Element mit der class="last". Eigentlich müsste man die Breiten der vorhergehenden Menüelemente irgendwie brechnen, beim GMENU gibts dafür ja applyTotalW. Aber scheinbar nicht für das TMENU. Hat jemand einen Ansatz, wie man das auslesen kann? Hab hier leide rnoch nichts gefunden, was mir weiterhilft.

wrapItemAndSub = <li class="first"> | </li>|*| <li> | </li> |*| <li class="last"> | </li><br>

Mein Versuch war der folgende:

wrapItemAndSub = <li class="first"> | </li>|*| <li> | </li> |*| <li class="last" style="width:300-[2.w];> | </li><br>

Aber das funktioniert nicht:

Kann man nicht irgendwas mit [2.w]++ machen? So dass die Breiten pro gebrauchtes Menuelement zusammengezählt werden?

Danke schon mal für jeden Ratschlag