Frage zu Drop-Down Menü

Hallo,

ich sitze hier gerade vor einem kleinen Problem bzw. habe eine Frage und hoffe, dass ihr mir bei der Lösung helfen könnt.

Ich möchte auf meiner Seite ein horizontales Drop-Down Menü einbauen, habe mir dazu einige Tutorials angesehen und eines gefunden, das mir gefällt. Ich hab es entsprechend per CSS meinen Bedürfnissen angepasst und es funktioniert bestens.

Hier das TS:

### Menü ###

	MENU = HMENU
	MENU {
		special = directory
		special.value = 1

	### Erste Ebene ###
   	 1 = TMENU
   	 1 {
    	  wrap = <ul class="menu">|</ul>
    	  noBlur = 1
    	  expAll = 1
    	  NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
    	  
    	  CUR < .NO
    	  CUR.doNotLinkIt = 1
    	  
    	  ACT < .NO
    	  ACT = 1
    	  ACT.ATagParams = class="active"
   	 }

   	### Zweite Ebene ###
   	 2 = TMENU
   	 2 {
   	   wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
   	   NO.allWrap = <li>|</li>
    		}
	}

Nun möchte ich zusätzlich noch zwischen den einzelnen Menüpunkten gerne noch einen senkrechten Strich (Pipe-Symbol) mit einbauen. Und hier ist nun mein Problem... wie bekomme ich das hin?

Ich weiß, dass man ein einfaches TMENU mit den Pipes so realisieren kann (hier ist auch gleich schon das erste und das zweite Pipe-Symbol gelöscht):

linkWrap =  | | |*|  | | |*|  |

Entsprechend habe ich versucht dieses bei meinem NO.wrapItemAndSub einzubauen.
(erst einmal die ganz einfache Variante)

NO.wrapItemAndSub = "leerzeichen" <li onmouseover="show(this)" onmouseout="hide(this)">|</li> "leerzeichen pipesymbol"

Aber es funktioniert nicht (habe auch einige andere schreibweisen versucht). Entweder werden die Pipesymbole gar nicht angezeigt, oder aber sie werden alle hintereinander eine Zeile über meinem eigentlichen Menü angezeigt ?!

Hat jemand eine Idee warum das so ist?

Gruß
Kaer

Kaervekk schrieb

... oder aber sie werden alle hintereinander eine Zeile über meinem eigentlichen Menü angezeigt ?!

Das wird schon einer der richtigen Schreibweisen gewesen. Dass die Pipe-Symbole sich verselbstständigen, wird wohl daran liegen, dass Du die Listenelementen floatest. Somit nimmst Du sie aus dem Dokumentenfluss raus. Die Pipe-Symbole befinden sich aber nicht in den Listenelementen, bleiben also im Dokumentenfluss und ordnen sich neu und zwar so als gäbe es die Listenelemente nicht mehr.
Du muss aber nicht die Pipe-Symbole unbedingt in die Listenelementen rein schreiben. Statt dessen könntest Du über CSS die border-Eigenschaaft der Listenelementen als Pipe-Symbole missbrauchen - border-left oder border-right.
Falls Du beim ersten oder beim letzten li-Element kein border haben willst, kannst Du entsprechend in Deinem TypoScript dem Element eine class oder id zuweisen und in der CSS-Datei dieser class oder id die border-Eigenschaft wieder rückgängig machen.
Das Ganze geht auch ohne extra class oder id. Alle li-Elemente bekommen ein border-left.

li { border-left: 1px solid red; }

Nur das erste li-Element nicht:

li:first-child { border-left: none; }

Das Dumme ist nur, der IE < 7 kennt die Pseudoklasse first-child nicht. Wenn Du die li-Elementen mit display: inline positionieren würdest, könntest Du mit einem kleinen Trick auch im IE < 7 den border beim ersten li-Element verstecken. Da Du aber die li-Elementen offensichtlich floatest - müsstest Du dem ersten li-Element eine class oder id zuordnen.