Menu erst nach Rollover sichtbar machen!?

Hallo Forum,

Ich suche nach einer schlauen Möglichkeit ein Menu zu verstecken, so dass erst nur der Hauptpunkt (Hier handelt es sich um ein Bild!!) sichtbar ist!
Bei einem Rollover über (oder einem Klick auf) das Bild, soll dann das eigentliche Menu sichtbar werden.
D.h. eine Art Layer_Menu!

Graphisch sollte es in etwa so aussehen:
Nach laden der Seite (Normalzustand):
Bild: robinhood-infodienst.com/…/menu.gif

Bei einem Rollover sollte dann das eigentliche Menu sichtbar werden:
Bild: robinhood-infodienst.com/…/rollover.gif

Ich habe es bis jetzt folgendermassen versucht:
Menu per TS generiert:

### MENU Start ###
marks.MENU = HMENU
marks.MENU {
	special = list
	special.value = 2
	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="navi">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="parent">|</li>
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul>|</ul>
	3 < .2
	4 < .2
}
### MENU End ###

…und dann habe ich versucht, die Liste per CSS zu stylen!! (IE berücksichtigt)
Es klappt eigentlich auch… Zumindest so, dass das Untermenu erst bei einem Rollover angezeigt wird!!

Aber wenn ich es graphisch aufpeppen möchte, habe ich Probleme mit einer einheitlichen Darstellung (IE, Firefox etc.)! Layout ist unterschiedlich, verschiebt ungleich… bricht nach „bulletgrafik“ um etc.

Auch nach längeren rumspielen und versuchen krieg es nicht wie gewollt hin… darum wollte ich jetzt fragen, ob jemand schon mal so was nur mit TypoScript realisiert hat??
Da Menu richtig zu generieren wäre kein Problem… wie kann ich aber einrichten, dass es erst nach einem Rollover erscheinen soll?

Oder hat jemand sonst eine gute Idee, wie man so etwas „relativ“ einfach umzusetzen könnte??

Zur Information:
Es handelt sich hierbei um ein zweites Menu… welches identisch zum Ersten sein sollte!
Das Erste ist immer Sichtbar (sieht aus wie das Rollover-Beispiel oben) und wurde folgendermassen per TS erstellt:

### REPORTS MENU Start ###
marks.REPORTS = HMENU
marks.REPORTS.special = directory
marks.REPORTS.special.value = 3
marks.REPORTS.1 = TMENU
marks.REPORTS.1 {
    expAll = 1
    NO {
    allWrap = <table><tr><td><div class="menu">|</div></td></tr><tr><td><img style="border:0;" src="fileadmin/images/dotline.gif" alt="" /></td></tr></table>
    before =    
    beforeImg = fileadmin/images/bullet.gif
    beforeROImg = fileadmin /images/bullet.gif
    RO = 1
}
    ACT = 1
    ACT {
    allWrap = <table><tr><td><div class="menu1">|</div></td></tr><tr><td><img style="border:0;" src="fileadmin/images/dotline.gif" alt="" /></td></tr></table>
    before =    
    beforeImg = fileadmin/images/bullet.gif
}
}
### REPORTS MENU End ###

Vielleicht gibt es ja eine viel einfachere Lösung!? Mühe ich mich hier vergebens ab?
Bin um jeden Tipp froh!?!

Freundliche Grüsse

Rolando

Hallo,

habe jetzt nur einen Tipp zur Vorgehensweise: Erstelle doch das ganze mal statisch in Dreamweaver/Editor deiner Wahl und zwar so dass alles in jedem Browser funktioniert und erst dann schaust du wie das TS auszusehen hast.
Wenn der erste Schritt bereits erledigt ist, dann stell das online, wenn nicht, dann ist das kein TYPO3 sondern ein html/css-Problem.
Die Basis sollte eine Liste sein

hoffe ich konnte helfen
georg

Hallo just2b,

Danke für den Tipp!! Ich habe das Ganze jetzt mal statisch erstellt und werde nun versuchen es per TS einzubauen...

Hallo just2b,

Habe doch so meine Probleme bei der Umsetzung in TS und wäre froh, wenn mir jemand helfen könnte!

Die HTML Liste sieht, bzw. sollte folgendermassen aussehen:

<ul>
  <li><a href="/index.php?id=2" title="">
      <img src="../menu.gif" alt="Hauptmenupunkt" width="208" height="39" border="0" /><!--[if IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>
  <li><a href="/index.php?id=16" title="">
      <img src="../bullet.gif" width="10" height="5" border="0" alt="" />
      <img src="../clear.gif" width="10" height="0" border="0" alt="" />Subpunkt 01</a>
  </li>

  <li><a href="/index.php?id=15" title="">
      <img src="../bullet.gif" width="10" height="5" border="0" alt="" />
      <img src="../clear.gif" width="10" height="0" border="0" alt="" />Subpunkt 02</a>
  </li>

  <li><a href="/index.php?id=14" title="">
      <img src="../bullet.gif" width="10" height="5" border="0" alt="" />
      <img src="../clear.gif" width="10" height="0" border="0" alt="" />Subpunkt 03</a>
  </li>

  <li><a href="/index.php?id=13" title="">
      <img src="../bullet.gif" width="10" height="5" border="0" alt="" />
      <img src="../clear.gif" width="10" height="0" border="0" alt="" />Subpunkt 04</a>
  </li>

  <li><a href="/index.php?id=12" title="">
      <img src="../bullet.gif" width="10" height="5" border="0" alt="" />
      <img src="../clear.gif" width="10" height="0" border="0" alt="" />Subpunkt 05</a>
  </li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

Statisch (inkl. CSS) funktioniert das Ganze bestens... IE, FF...

Doch leider weis ich nicht genau, wie ich das Ganzen nun per TS umsetze!?
Die Unterpunkte gehen (mehr oder weniger)... aber der Hauptmenupunkt!? #angry#

Mein bisheriger Ansatz:

##################
### MENU Start ###
marks.MENU = HMENU
marks.MENU {
	special = list
	special.value = 2
	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul>|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li><img src="../bullet.gif" width="10" height="5" border="0" alt="" /><img src="../clear.gif" width="10" height="0" border="0" alt="" />|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li>|<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}
### MENU End ###
################

Kann man die <a>-Tags auch noch spezifizieren/anpassen?
Und wie wrappe ich das "<!--[if IE 7]><!--></a><!--<![endif]-->" um den </a>-Tag des Parent-item und das "<!--[if lte IE 6]><table><tr><td><![endif]-->" dahinter??
Wie bekäme ich die Bilder in die <a>-Tags? ...jetzt liegen sie ausserhalb... und die Zeile wird nach Grafiken umgebrochen!?
Auch ein zusätzlicher <nobr>...</nobr>-Wrap brachte da nichts!?

Wäre froh, wenn mir jemand der sich mit TS auskennt mal erklären könnte, wie man so eine Vorgabe genau umsetzt!?

Danke für keine Tipps!?!?

Ich habe das HTML so umgeschrieben:

<ul>
<li><a href="/index.php?id=2" title="">
    <img src="../menu.gif" alt="Hauptmenupunkt" width="208" height="39" border="0" /><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
###MENU###
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

Und dann den Marker per TS gefüllt:

########################################
#### MARK MENU (1.Submenu) START ####
marks.MENU = HMENU
marks.MENU.special = directory
marks.MENU.special.value = 3
marks.MENU.1 = TMENU

##Erste Ebene##
marks.MENU.1 {
    expAll = 1
    NO {
      allWrap = <li><a class="sub" href="" title="">|</a></li>
      RO = 1
    }
    ACT = 1
    ACT {
      allWrap = <li><a class="sub" href="" title="">|</a></li>
  }
}
#### MARK MENU (1.Submenu) END ####
######################################

Und dann das ganze per CSS so gestylet, dass das Submenu erst bei einem Rollover erscheint!!

So klappt es zumindest schon mal! Schade ist nur das der eigentliche Link so ja doppelt in einen a-Tag gewrappt wird!!

Wie könnte ich Typo3 sagen, dass der generierte Link die class="sub" erhalten soll?? Um nicht einen weiteren a-Tag mit class="sub" um den von Typo erstellten a-Tag wrappen zu müssen?

Sollte ja irgendwie möglich sein, oder?
Vielleicht weis ja da wenigsten jemand etwas?!!??

Vielleicht weis ja noch jemand was... ?? Tipps sind immer gerne willkommen!

Schalte den Post mal auf gelöst... Ihr dürf mir aber gerne auch direkt schreiben!