CSS Flyout Menü von CSSPlay

Hi Gemeinde,

ich möchte folgendes Menü realisieren. http://www.cssplay.co.uk/menus/vertical-list.html aber nur bis Ebebene 2.

<div id="navContainer">
        <ul id="nav">
         <li>
   		 <!--[if lte IE 6]><a href="#url"><table><tr><td><![endif]-->
            <ul class="toplevel">
                <li><a href="#url">Startseite</a></li>
        
                <li class="sublevel"><a href="#url">Aktuelles<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul class="sub pos2">
                        <li><a href="#url">Presse</a></li>
                        <li><a href="#url">Archiv</a></li>
                        <li><a href="#url">Sonstiges</a></li>
                    </ul>
               
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                
                <li class="sublevel"><a href="#url">Unternehmen<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul class="sub pos3">
                        <li><a href="#url">Daten</a></li>
                        <li><a href="#url">Jobs</a></li>
                        <li><a href="#url">Standorte</a></li>
                    </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="sublevel"><a href="#url">Leistungen<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
        
                    <ul class="sub pos4">
                        <li><a href="#url">Consulting</a></li>
                        <li><a href="#url">Netzwerktechnik</a></li>
                      
                    </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
        
                <li class="sublevel"><a href="#url">Partner<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul class="sub pos5">
                    
                        <li><a href="#url">Software</a></li>
                        <li><a href="#url">Hardware</a></li>
                        <li><a href="#url">Allianzen</a></li>
        
                    </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="sublevel"><a href="#url">Referenzen<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul class="sub pos6">
                        <li><a href="#url">Beispiele</a></li>
                    </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                
                <li class="sublevel"><a href="#url">Support<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
        
                    <ul class="sub pos7">
                        <li><a href="#url">Supportformular</a></li>
                    </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li class="sublevel"><a href="#url">Mobilfunk<!--[if gte IE 7]><!--></a><!--<![endif]-->
        
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul class="sub pos8">
                        <li><a href="#url">Portal</a></li>
                        <li><a href="#url">Leistungen</a></li>
                    </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    	  </li>
        </ul>
     </div>

Was sich für mich schwierig erweist, ist die Tatsache, dass ich nach der classe "sublevel" ein weiteres UL habe mit durchnummerierten Klassen.
Diese ermöglichen mir eine genaue Positionierung im Headerbereich.

Meine Frage lautet daher, wie bekomme ich entweder die class="sub posXX" durchnummeriert oder evtl. einfacher, wie kann ich der Klasse den Namen des Elternelements zuweisen, z.B. <ul class="leistungen">...?

Mein bisheriges TypoScript sieht so aus. Funktioniert bis auf die Durchnummerierung ganz gut.

#Hauptnavigation definieren
lib.navi = HMENU
lib.navi {

	special = list
	special.value = 3,4,5,6,7,8,9,94
	
	
	wrap = <ul id="nav"> <li> <!--[if lte IE 6]><a href="#url"><table><tr><td><![endif]--> <ul class="toplevel"> | <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul>
	

	1 = TMENU
	1 {
		expAll = 1
		noBlur = 1
		
		#Normalzustand
		NO.linkWrap = <li> | </li>
		
		IFSUB = 1
		IFSUB{
			 wrapItemAndSub = <li class="sublevel">|</li>
			 allWrap = | <!--<![endif]-->
			 linkWrap = |<!--[if IE 7]><!-->
			 ATagBeforeWrap = 1
			 
    			
	 	}
    	
			
		#Aktivzustand
		ACT < .NO
		ACT.ATagParams = class="aktiv"

	}	
	
	
	2 = TMENU
  	2{
  		noBlur = 1
  		expAll = 1
  		
  		wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub pos1"> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    		     		
    		NO.ATagTitle.field = subtitle//title
    		NO.wrapItemAndSub = <li> | </li>
    	    		
  		IFSUB = 1
    		IFSUB {
      			wrapItemAndSub = <li> | </li>
      			allWrap = | <!--<![endif]-->
      			#linkWrap = |<!--[if IE 7]><!-->
      			ATagBeforeWrap = 1
      		}
    	}

}

Danke vorab und schon mal ein schönes WE.

Grüße
Michael

Hallo lammic, du kannst für die Nummerierung der Klassen LOAD_REGISTER benutzen.
Vielleicht bring dir das Beispiel von https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/LoadRegister/Index.html schon genau das was du brauchst mit den vordefinierten Registern von Menüelementen:

temp.nav = HMENU
temp.nav.1 = TMENU 
temp.nav.1 {
    wrap = <ul id="nav">|</ul>
    expAll = 0
    noBlur = 1
    NO {
        wrapItemAndSub = <li class="subNavCount{register:count_HMENU_MENUOBJ} first">|</li>|*|<li class="subNavCount{register:count_HMENU_MENUOBJ}">|</li>|*|<li class="subNavCount{register:count_HMENU_MENUOBJ} last">|</li>
        wrapItemAndSub.insertData = 1
        stdWrap.htmlSpecialChars  = 1
    }
}

bzw. in deinem Fall (Zeile 43):

wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub pos{register:count_HMENU_MENUOBJ}"> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
wrap.insertData = 1

Ansonsten kannst du auch einen eigenen Counter machen, z.B. so:

    wrapItemAndSub.cObject = COA
    wrapItemAndSub.cObject {
       10 = LOAD_REGISTER
       10 {
           Counter.cObject = TEXT
           Counter.cObject.data = register:Counter
           Counter.cObject.wrap = |+1
           Counter.prioriCalc = intval
       }
      
       20  = COA
       20.if {
         value.data = register:Counter
         isLessThan = 4
       }
       20.10 = LOAD_REGISTER
       20.10 {
           Counter = 1
       }
      
       30 = TEXT
       30.value = <li class="navtype{register:Counter}">|</li>
       #20.insertData = 1
    }

In diesem Beispiel bekommen alle li Klassen die durchgezählten Werte 1 bis 4.
Dabei erstellt wrapItemAndSub.cObject.10 den Zähler und wrapItemAndSub.cObject.20 setzt ihn bei einem Wert über 4 wieder auf 1.
wrapItemAndSub.cObject.30 gibt den Wert dann aus, über das cObject als Inhalt in wrapItemAndSub. wrapItemAndSub kannst du natürlich durch wrap ersetzen, das war lediglich bei dem von mir realisierten Menü nötig.

wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub pos{register:count_HMENU_MENUOBJ}"> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
wrap.insertData = 1

Hi. Danke für die Tips. Die oben dargestellte Lösung wäre ja die komfortabelste, leider wird aber
register:count_HMENU_MENUOBJ aber nicht durch die Zahl ersetzt. Das erscheint genauso auch im Quelltext. Zumindest ist das so wenn ich wrap nehme. Aber auch mit dataWrap oder allWrap verhält sich das so.

Hast du einen anderen Ansatz für diese Lösung?

Gruß Michael

Hallo,

da stehe ich nun vor dem selben Problem: Ich habe das selbe Menü und komme bei dem dynamischen CSS nicht weiter. Leider benötige ich es für das Menü. Ich benutze haargenau den gleichen Aufbau von dem HTML und CSS Code wie oben.

Wenn ich jedoch versuche ein dynamischen CSS Wert zuzuweisen wird mir Typoscript angezeigt. Ich hoffe inständig, dass mir hier jemand weiter helfen kann, insbesondere, da ich bereits einige Zeit investiert habe ...

Mein TS

temp.mainmenue = COA
temp.mainmenue = HMENU
temp.mainmenue {

  entryLevel = 1
  wrap = <ul id="mainnav"> <li> <ul class="mainlevel"> | </ul></li></ul>
  
  1 = TMENU
  1 {
    
    expAll = 1
    
    NO.linkWrap = <li> | </li>
      
    IFSUB = 1
    IFSUB {
      wrapItemAndSub = <li> | </li>
      ATagBeforeWrap = 1
    }
    
    RO < .NO
  }
  
  2 = TMENU
  2 {
    #expAll = 1
    seitenid = TEXT 
    seitenid.value = {register:count_HMENU_MENUOBJ}
    
    wrap = <ul class="sublevel {seitenid.value}"> | </ul>
    wrap.stdWrap.insertData = 1  
    #stdWrap.htmlSpecialChars  = 1      
    
    NO.linkWrap = <li> | </li>
    
    IFSUB = 1
    IFSUB {
      wrapItemAndSub = <li> | </li>
      ATagBeforeWrap = 1
    }
  }
}

Mein Ansatz wäre, den Ausdruck zusammenzusetzen am liebsten mit einer UND-Verknüpfung allerdings stehe ich grad total auf den Schlauch wie ich das angehen sollte und hoffe auf Hilfe ... :S