---
title: "Menü mit sliding doors technique"
url: "https://www.typo3.net/d/67443-menue-mit-sliding-doors-technique"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS"]
created: "2007-08-29"
last_reply: "2007-09-25"
replies: 7
solved: false
page: 1
pages: 1
lang: "de"
---

# Menü mit sliding doors technique

TYPO3 › Menüs · 7 Antworten · gestartet 2007-08-29

## Eröffnungsbeitrag

**mike_sebaro** · 2007-08-29 · [Beitrag #1](https://www.typo3.net/d/67443-menue-mit-sliding-doors-technique/1)

Hallo

möchte gerne mein Design etwas aufpeppen und dazu css und sliding doors technique verwenden.

Der Link der generiert werden soll, sollte so aussehen:

```html
<a class="button" href="#"><span>Bring world peace</span></a>
```

Hier noch das CSS dazu:

```html
.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}
```

Allerdings generiert mir Typo3 den Link nicht so, dass es funktioniert, wie bringe ich Typo3 Dazu den Link so zu generieren wie ich ihn brauche?

Hier das TS das ich bis jetzt habe:

```typoscript
  subparts.mainmenue = HMENU
  subparts.mainmenue.special = directory
  subparts.mainmenue.special.value = 1
  subparts.mainmenue.1 = TMENU
  subparts.mainmenue.1.NO {
	ATagParams = class="button"
```

kann mir da jemand helfen wie ich das am besten lösen kann?

Gruß Mike

## Antworten

### [#2](https://www.typo3.net/d/67443-menue-mit-sliding-doors-technique/2) · maik · 2007-08-29

Soweit ich das sehe fehlt dir ja nur noch der innere SPAN.
Die Klasse sollte mit

```typoscript
ATagParams = class="button"
```

zugewiesen werden.

Den Link Text könntest du mit stdWrap in den SPAN packen.

Alternativ gibt es noch die Option

```typoscript
ATagBeforeWrap = 1
```

Schau doch mal in die TSRef 10.8, da findest du die ganzen Optionen für ein TMENUITEM.

<https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Hmenu/Tmenu/Tmenuitem.html>

### [#3](https://www.typo3.net/d/67443-menue-mit-sliding-doors-technique/3) · mike_sebaro · 2007-08-29

hab gerade noch etwas rumprobiert.
ich komm irgendwie nicht drauf, sollte doch mal wieder ne pause machen.

mein ts sieht jetzt so aus:

```typoscript
// TMENU (TOPMENÜ)
  subparts.mainmenue = HMENU
  subparts.mainmenue.special = directory
  subparts.mainmenue.special.value = 1
  subparts.mainmenue.1 = TMENU
  subparts.mainmenue.1.NO {
    ATagParams = class="button"
    stdWrap = <span> | </span>
```

aber nix von span zu finden :-(

### [#4](https://www.typo3.net/d/67443-menue-mit-sliding-doors-technique/4) · d.​walter · 2007-08-29

Ich habe das so gemacht:

TS

```typoscript
temp.MAINMENU = HMENU
temp.MAINMENU {
        special = directory
        special.value = 55
        1 = TMENU
        1 {
                noBlur = 1
                wrap = <ul>|</ul>
                NO = 1
                NO {
                      ATagTitle.field = abstract // description // title
                        wrapItemAndSub = <li>|</li>
                }
                CUR < .NO
                CUR.wrapItemAndSub = <li id=current>|</li>
                #CUR.doNotLinkIt = 1
        
               ACT <.CUR
            }   
       } 
}
```

und das CSS dazu

```html
#nav_main {
	width:100%;
	font-size: 1.2em;
	float:left;
	color: #fff;
    background-color:#98CEFA;
    background:#98CEFA url("../../images/bg.png") repeat-x bottom;	
}

#nav_main ul {
  white-space: nowrap;
  line-height: 1em;
  margin:0;
  padding:0 0 0 50px;
  list-style:none;
}
  
#nav_main li {
  float:left;
  background: #98CEFA url("../../images/left.png") no-repeat top left;
/*  margin-right: 2px;  nur einfügen bei ECKIGEN Ecken */
  padding: 0 0 0 3px;
  margin: 0;
  border-bottom:1px solid #000;
}

#nav_main a {
  float:left;
  display:block;
  color:#334;

  background: transparent;
  background: url("../../images/right.png") no-repeat top right;
  padding:5px 11px 3px 8px;
  text-transform: none;
  text-decoration:none;
  font-weight:bold;
      
  width: auto; /* nur IE 5.x */
  width/**/:/**/ .1em; /* für IE 6.0 */
}

#nav_main > ul a {width:auto;}  /* für alle anderen Browser */

/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#nav_main a {float:none;}
/* End IE5-Mac hack */

*/ #nav_main li:hover, #nav_main li:hover a { background-position:0% -80px; } 
*/ #nav_main li:hover a { background-position:100% -80px; } 

*/ #nav_main #current { background-position:top left } 
*/ #nav_main #current a { background-position:top right } 

#nav_main a:hover { 
    color:#fff;
    background-color: transparent; 
    background:    url("../../images/right.png") no-repeat top right; 
}

#nav_main #current {
  background-image:    url("../../images/left.png"); 
  border-width:0 
}
```

### [#5](https://www.typo3.net/d/67443-menue-mit-sliding-doors-technique/5) · mike_sebaro · 2007-08-29

dein artikel d.walter bringt mich jetzt nicht weiter.
ich brauch ja nur das span tag im link mehr nicht

### [#6](https://www.typo3.net/d/67443-menue-mit-sliding-doors-technique/6) · d.​walter · 2007-08-29

Hallo mike probier mal

```typoscript
stdWrap.wrap = <span> | </span>
```

und nicht vergessen, alle Klammern wieder zu schliessen.

Daniel

### [#7](https://www.typo3.net/d/67443-menue-mit-sliding-doors-technique/7) · mike_sebaro · 2007-08-30

super danke klappt jetzt

### [#8](https://www.typo3.net/d/67443-menue-mit-sliding-doors-technique/8) · mike_mcfly · 2007-09-25

Und hier nochmal für die Nachwelt:

```typoscript
	### Menu oben ###################################
	subparts.menu = HMENU
	subparts.menu.1 = TMENU
	subparts.menu.1 {
	# Normaler Status
	expAll = 1
	noBlur = 1
        NO.allWrap = <li> | </li>
        NO.stdWrap.wrap = <span> | </span>
 	NO.stdWrap.htmlSpecialChars = 1
	NO.ATagTitle.field = subtitle/title

	# Aktiver Status
	ACT > NO
	ACT = 1
	ACT.stdWrap.htmlSpecialChars = 1
        ACT.allWrap = <li class="aktiv"> | </li>
        ACT.stdWrap.wrap = <span> | </span>
}
}
```

Und hier der Auszug aus dem CSS:

```typoscript
ul#menu a {
   float:left;
   background: url(../images/tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
	border-bottom: 1px solid #fff;
}

ul#menu a span {
   float:left;
   display:block;
   background: url(../images/tabright.gif) no-repeat right top;
   padding:6px 15px 3px 8px;
   color: #fff;
}

#menu li.aktiv a {
   background-position:0% -42px;
	color: #99ccff;
	border-bottom: 1px solid #709B16;
}

#menu li.aktiv a span {
   background-position:100% -42px;
	color: #fff;
}
```

---

Quelle: „Menü mit sliding doors technique“, typo3.net, https://www.typo3.net/d/67443-menue-mit-sliding-doors-technique
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.