---
title: "TMENU mit IMAGE und ROeffekt mittels css"
url: "https://www.typo3.net/d/83232-tmenu-mit-image-und-roeffekt-mittels-css"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2008-10-24"
last_reply: "2008-10-24"
replies: 0
solved: false
page: 1
pages: 1
lang: "de"
---

# TMENU mit IMAGE und ROeffekt mittels css

TYPO3 › Menüs · 0 Antworten · gestartet 2008-10-24

## Eröffnungsbeitrag

**paxoptimusprime** · 2008-10-24 · [Beitrag #1](https://www.typo3.net/d/83232-tmenu-mit-image-und-roeffekt-mittels-css/1)

Hallo, habe das ypslideoutmenu aus
<http://typo3.intervation.de/snippets/menues/ypslideoutmenu.html> genommen...

Nun wollte ich die erste Ebene als Grafik mit RO hinkriegen...

Da das ypslideoutmenu menü auf ein TMENU basiert musste ich den cobject IMAGE verwenden um die erste ebene grafisch zu gestalten...
leider hatte ich dabei kein mouseover effekt und habe versucht ein "GMENU" mittels css nachzubauen... leider stoß ich auf grenzen z.B bei der übernahme der dimensionen in XY zwar kann ich die Gifs richtig reproduzieren... doch ich kann die dimensionen die nicht statisch sind nicht ins css als background übernehmen und irgendwie funktioniert mein ypslideoutmenu ab der 2ten ebene auch nicht mehr richtig... hat da einer eine lösung? vll mit der EXT dynamic css

www.fechten-böblingen.de

```typoscript
# Angabe für Normalzustand

temp.css_menue10 = IMG_RESOURCE
temp.css_menue10 {
        file = GIFBUILDER
        file {
		XY = 10+[10.w]+20,24
		backColor = #ffffff
		5 = IMAGE
		5 {
			file = fileadmin/templates/images/off.png
          		file.width = 1000
          		file.height = 24
          		offset = 0,0
          	}
          	6 = IMAGE
          	6 {
          		file = fileadmin/templates/images/off-r.png
          		file.width = 5
          		file.height = 24
          		offset = 10+[10.w]+15, 0
          	}
          	10 = TEXT
          	10 {
			text.field = title
            		fontSize = 10
            		fontFile = fileadmin/templates/fonts/verdanab.TTF
            		offset = 23,20
            		fontColor = #ffffff
		}
 
        }
	stdWrap.wrap = { background-image: url(|); }
}
 
# Angabe für Hoverzustand

temp.css_menue20 < temp.css_menue10
temp.css_menue20 {
        file = GIFBUILDER
        file {
		XY = 10+[10.w]+20,24
		backColor = #ffffff
		5 = IMAGE
		5 {
			file = fileadmin/templates/images/off.png
          		file.width = 1000
          		file.height = 24
          		offset = 0,0
          	}
          	6 = IMAGE
          	6 {
          		file = fileadmin/templates/images/off-r.png
          		file.width = 5
          		file.height = 24
          		offset = 10+[10.w]+15, 0
          	}
          	10 = TEXT
          	10 {
			text.field = title
            		fontSize = 10
            		fontFile = fileadmin/templates/fonts/verdanab.TTF
            		offset = 23,20
            		fontColor = #ffffff
		}
 
        }
	stdWrap.wrap = { background-image: url(|); }
}

# mainnavi

lib.navi = HMENU
lib.navi {
        special = directory
        special.value = 3
  	stdWrap.dataWrap = <ul>|</ul>
  	stdWrap.required = 1
  	korek_css = padding-bottom:20px;margin-left:1px;text-align:left
  	aniLen = 800
  	hideDelay = 5
  	minCPUResolution = 10
  	kore_so_x = -2
  	div_id_layer = yymenu
  	wrap = <div id=grafik_menue_demo>|</div>
 
 	1 = tx_menu_ypslideoutmenu
	1 {
    		expAll = 1
    		NO = 1
    		NO {
      			doNotLinkIt = 1
      			linkWrap = <li class="lvl1"> | </li> 
      			stdWrap.cObject = COA
      			stdWrap.cObject{
        			10 = LOAD_REGISTER
        			10.css_menue.cObject < temp.css_menue10
        			10.css_menue_hover.cObject < temp.css_menue20
        			10.css_menue_ges.cObject = TEXT
        			10.css_menue_ges.cObject.dataWrap = #mm_id{field:uid} {register:css_menue} #mm_id{field:uid}:hover {register:css_menue_hover} {register:css_menue_ges}
        			20 = TEXT
        			20{
          				field = subtitle//title
          				typolink {
            					parameter.field = uid
            					ATagParams.cObject = COA
            					ATagParams.cObject{
              						30 = TEXT
              						30.dataWrap = id="mm_id{field:uid}"
            					}
          				}
        			}
      			}
    		}
  	}
 
	2 = tx_menu_ypslideoutmenu
  	2 { 
     		moveTo = down
      		height = 22
      		width = 177
      		expAll=1
      		NO {
      		}
  	}
}
 
# setup

seite = PAGE
seite.stylesheet = fileadmin/templates/css/default.css
seite.headerData.300 = COA
seite.headerData.300{
  wrap = <style> | </style>
  10 = TEXT
  10.value(

#grafik_menue_demo ul, #grafik_menue_demo li {
	margin: 0px;
	padding: 0px;
	list-style-type : none;
	}
#grafik_menue_demo a {
	text-indent: -999em;
	color: #FFFFFF;
	width:100px;
	height:25px;
	display:block;
	}
                
  )
20 = TEXT
20.dataWrap = {register:css_menue_ges}
}
seite.30 = TEMPLATE
seite.30 {
        template = FILE
        template.file = fileadmin/templates/index.html
        workOnSubpart = DOKUMENT
        subparts.CONTENT = CONTENT
        subparts.CONTENT {
                table = tt_content
                select.orderBy = sorting
                select.where = colPos=0
        }
        subparts.HEAD_NAVI < lib.head_navi   
        subparts.NAVIGATION < lib.navi
}
```

---

Quelle: „TMENU mit IMAGE und ROeffekt mittels css“, typo3.net, https://www.typo3.net/d/83232-tmenu-mit-image-und-roeffekt-mittels-css
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.