30. 04. 2011, 14:37

Hallo,
also vorweg: ich bin ein Typoscript-Neuling, also bitte langsam und deutlich sprechen ;)

Ich habe folgendes Problem:
Ich sollte ein bestehendes Menü zu einem Accordion (mit jQuery) umbauen, so weit, so gut...

Die Menüstruktur gestaltet sich so:

|-Punkt 1
|---Punkt 1.1
|---Punkt 1.2
|-Punkt 2
|---Punkt 2.1
|---Punkt 2.2

etc. und bei Klicks auf die Hauptpunkte sollen die entsprechenden Unterpunkte ausfahren und ggf. andere bereits ausgefahrene zusammenklappen - Accordion eben :)

Das jQuery Script, das ich verwende, sieht so aus:

  1. <script language="javascript">
  2. 		$(document).ready(function() { 
  3. 			$('div.demo-show2> div').hide(); 
  4. 			$('div.demo-show2> h3').click(function() { 
  5. 				var $nextDiv = $(this).next(); 
  6. 				var $visibleSiblings = $nextDiv.siblings('div:visible'); 
  7.  
  8. 				if ($visibleSiblings.length ) { 
  9. 					$visibleSiblings.slideUp('fast', function() { 
  10. 						$nextDiv.slideToggle('fast'); 
  11. 					}); 
  12. 				} else { 
  13. 					$nextDiv.slideToggle('fast'); 
  14. 				} 
  15. 			}); 
  16. 		});
  17. 	</script>

und das TS für dieses Menü so:

  1. lib.menuleft = HMENU
  2. lib.menuleft {
  3.   special = directory
  4.   special.value = 20
  5.   entryLevel = 1
  6.   wrap = <div class="demo-show2">|</div>
  7.  
  8.   1 = GMENU
  9.   1 {
  10.     expAll = 1
  11.     NO = 1    
  12.     NO {
  13.       XY = 185,35
  14.       transparentBackground = 1
  15.       backColor = #ffffff      
  16.       transparentColor = #ffffff      
  17.       wrap = <h3 class="inactive">|</h3>
  18.       5 = IMAGE
  19.       5.file = fileadmin/templates/images/submenu_trenner.png
  20.       5.offset = 5,32
  21.       10 = TEXT
  22.       10 {
  23.         text.field = title
  24.         fontColor = #82bd2b
  25.         fontFile = fileadmin/fonts/segoeprb.ttf
  26.         fontSize = 18
  27.         niceText = 1
  28.         offset = 5,25        
  29.       }
  30.     }
  31.     RO < .NO
  32.     RO {
  33.       10 = TEXT
  34.       10 {
  35.         fontColor = #3c92ad
  36.       }
  37.     }
  38.     CUR < .RO
  39.     CUR {
  40.       wrap = <h3 class="active">|</h3>
  41.       5.file = none
  42.     }
  44.   }
  45.   2 = GMENU
  46.   2 {   
  47.     NO = 2
  48.     wrap = <div>|</div>
  49.     NO {
  50.       XY = 185,20+[16.h]
  51.       transparentBackground = 1
  52.       backColor = #ffffff      
  53.       transparentColor = #ffffff
  54.  
  55.       # Text auf den Menüpunkt rendern
  56.       10 = TEXT
  57.       10 {
  58.         text.field = title
  59.         text.listNum = 0
  60.         text.listNum.splitChar = |
  61.         fontColor = #82bd2b
  62.         fontFile = fileadmin/fonts/segoeprb.ttf
  63.         fontSize = 14
  64.         niceText = 1
  65.         offset = 25,14
  66.       }
  67.  
  68.       # Eine ggf. vorhandene zweite Textzeile
  69.       15 < .10
  70.       15.text.listNum = 1
  71.       15.offset = 25,30
  72.  
  73.       # Hilfsebene zur Berechnung der Höhe von Menüpunkten
  74.       16 < .10
  75.       16.text.case = upper
  76.       16.text.listNum = 1
  77.       16.offset = 1000,1000
  78.  
  79.       20 = IMAGE
  80.       20.file = fileadmin/templates/images/submenu_no.png
  81.       20.offset = 14,5
  82.  
  83.  
  84.     }
  85.     CUR < .NO
  86.     CUR {
  87.       10 = TEXT
  88.       10 {
  89.         fontColor = #3c92ad
  90.       }
  91.       15 {
  92.         fontColor = #3c92ad
  93.       }
  94.     }
  95.     RO < .CUR     
  96.     }
  97.   }
  98.  
  99. # Include the JS and CSS files
  100. #page.includeCSS.file7 = EXT:rgaccordion/res/menu/menu.css
  101. #page.includeJS.file1  = EXT:rgaccordion/res/menu/mootools.js
  102. #page.includeJS.file2  = EXT:rgaccordion/res/menu/menu.js

Das funktioniert soweit auch gut, aber ein "kleines" Problem habe ich noch: das derzeit aktive Untermenü sollte ausgefahren bleiben. Ich dachte mir, am besten ginge das, wenn ich das Javascript so ändere:

  1. <script language="javascript">
  2. 		$(document).ready(function() { 
  3. 			$('div.demo-show2> div.inactive').hide(); 
  4. 			$('div.demo-show2> h3').click(function() { 
  5. 				var $nextDiv = $(this).next(); 
  6. 				var $visibleSiblings = $nextDiv.siblings('div:visible'); 
  7.  
  8. 				if ($visibleSiblings.length ) { 
  9. 					$visibleSiblings.slideUp('fast', function() { 
  10. 						$nextDiv.slideToggle('fast'); 
  11. 					}); 
  12. 				} else { 
  13. 					$nextDiv.slideToggle('fast'); 
  14. 				} 
  15. 			}); 
  16. 		});
  17. 	</script>

dazu müsste ich dann "nur noch" TypoScript dazu bringen, dass dem div, das das Untermenü (2) umschliesst, eine Klasse "inactive" bei nicht aktiven bzw. "active" bei aktiven Punkten zugewiesen wird - leider habe ich keine Ahnung, wie ich das machen sollte?

Vielen, vielen Dank schon mal für Eure Hilfe!