Menü mit sliding doors technique

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:

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

Hier noch das CSS dazu:

.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:

  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

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

ATagParams = class="button"

zugewiesen werden.

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

Alternativ gibt es noch die Option

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

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

mein ts sieht jetzt so aus:

// 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 :-(

Ich habe das so gemacht:

TS

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

#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 
}

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

Hallo mike probier mal

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

und nicht vergessen, alle Klammern wieder zu schliessen.

Daniel

super danke klappt jetzt

Und hier nochmal für die Nachwelt:

	### 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:

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;
}