Die wichtigsten Menüs in TYPO3 auf einem Blick

Hier gibt es eine Übersicht über die wichtigsten Menüs in TYPO3. Jedes der Menüs ist lauffähig und ausbaufähig (Stand 4.3.08-)!

- Text-Menüs
--- Simples Listenmenü
--- Droddown-Menü
- Grafische Menüs
--- Simples grafisches Menü
--- Grafisches Menü mit Untertitel
--- Bildermenü (ohne Text)
- Kombination Text + Grafik
- Sonstiges
--- Browse-Menü
--- Breadcrumb-Menü
--- Spacer-Menü
--- Ypslide-Menü
--- 2. Menüebene an einer anderen Stelle
--- Service-Menü

Dieses HowTo beschäftigt sich ausdrücklich nicht mit
- verschiedenen Erklärungen der Menüzustände
- Konfigurationen wie special = directory, special = list, entryLevel oder optionsplit
- TMENU_LAYER/GMENU_LAYER-Menüs => Alternativen habe ich hier erklärt

Dieser Thread ist zwecks Wahrung der Übersicht geschlossen. Fragen zu Menüs im Forum sind natürlich erlaubt. Wer erwähnenswerte Menüs hat, PM an mich.

Viel Freude beim Lesen & Ausprobieren
Georg
PS: Feedback & Dank gern per PM & Co

.: 1. Text-Menüs (TMENU) :.

1.1. Simples Listenmenü
Das Menü kann sehr einfach über CSS gestyled werden und ist barrierefrei. Einige Möglichkeiten sind hier sichtbar: http://css.maxdesign.com.au/listamatic/

temp.menu = HMENU
temp.menu {
	1 = TMENU
	1 {
		#expAll =1
		wrap = <ul id="nav1">|</ul>
		noBlur = 1
		NO = 1
		NO {
			wrapItemAndSub = <li>|</li>
			stdWrap.htmlSpecialChars = 1
			ATagTitle.field = title
		}
		ACT <.NO
		ACT {
			wrapItemAndSub = <li id="nav1act">|</li>
		}
	}
	
	2 < .1
	2 {
		wrap = <ul id="nav2">|</ul>
		ACT.wrapItemAndSub = <li id="nav2act">|</li>
	}
	
	3 < .2
	3 {
		wrap = <ul id="nav3">|</ul>
		ACT.wrapItemAndSub = <li id="nav3act">|</li>
	}
}

1.2. Dropdownmenü
Ein Dropdownmenü ermöglicht viele Menüpunkte mit geringem Platzverbraucht, lässt sich mit CSS genauso leicht stylen (kurzes Bsp dazu http://www.htmlopen.de/programmierung/formulare/meue_leisten.html ).

temp.dropdownmenu= HMENU
temp.dropdownmenu {
  wrap = <form action=""><p><select onchange="window.location=this.options[this.selectedIndex].value"><option value="">Seitenauswahl</option>|</select></p></form>
  1 = TMENU
  1 {
    expAll = 1
    NO {
      doNotLinkIt = 1 
      stdWrap.cObject = COA
      stdWrap.cObject {
        10 = TEXT
        10 {
          wrap = <option value="{getIndpEnv:TYPO3_SITE_URL}|">
          insertData = 1
          typolink {
            parameter.field = uid
            returnLast = url
          }
        }
        20 = TEXT
        20 {
           field = subtitle//title
           wrap =  |</option>
        }
      }
    }
    ACT <.NO
    ACT = 1
    ACT.stdWrap.cObject.10.wrap = <option selected="selected" value="{getIndpEnv:TYPO3_SITE_URL}|">
  }
  2 < .1
  2.NO.stdWrap.cObject.20.wrap = --|</option>
  3 < .1
  3.NO.stdWrap.cObject.20.wrap = ----|</option>
  4 < .1
  4.NO.stdWrap.cObject.20.wrap = ------|</option>
  5 < .1
  5.NO.stdWrap.cObject.20.wrap = --------|</option>
}

{getIndpEnv:TYPO3_SITE_URL} ist notwendig für den IE und bei Realurl

.: 2. Grafische Menüs (GMENU) :.

2.1. Simples Grafisches Menü
Grafische Menüs bieten natürlich viel mehr Möglichkeiten (sofern Imagemagick/Graphicksmagick installiert ist).

Folgendes TS gibts als Beispiel hier zum Bewundern: http://www.expression-dance.com/

temp.grafischMenu = HMENU
temp.grafischMenu {

	1=GMENU
	1 {
		expAll = 1
		noBlur = 1

		NO = 1    
		NO {
			transparentBackground = 1
			ATagTitle.field = title
			XY=[10.w]+10,24

			5 = IMAGE
			5.file = fileadmin/menuBG.jpg		

			10=TEXT
			10 {
				text.field=title
				offset=1,20
				fontColor=#FFFFFF
				fontFile=fileadmin/fonts/FloraICG.ttf
				fontSize=18   
			}
		}
		ACT <.NO
		ACT.10.fontColor = #BF2236

		RO <.NO
		RO.10.fontColor = #BF2236

		ACTRO <.RO
	}
}

2.2. Grafisches Menü mit Untertitel
Oft will man noch zusätzlichen Text neben dem Titel in die Grafik packen und da bietet sich u.a. der Untertitel an.
Folgendes TS gibts als Beispiel hier zum Bewundern: http://www.joho.at/

temp.mainMenuG = HMENU
temp.mainMenuG {

	1=GMENU
	1 { 
                expAll = 1
		noBlur = 1
		NO = 1    
		NO {
			allWrap = |<br />
			backColor = #158ebd
			transparentBackground = 1
			XY = [10.w]+80, 52
			10=TEXT
			10 {
				text.align = right
				text.field = title
				text.case = upper
				offset= 75,25
				fontColor = #FFFFFF
				fontFile= fileadmin/fonts/GOTHICB.TTF
				fontSize= 17  
				#antiAlias = 1    
			}		
		20 = TEXT 
		20 {
				text.align = right
				text.field= subtitle
				text.case = upper
				offset = [10.w]-[20.w]+75,38
				fontColor = #FFFFFF
				fontFile= fileadmin/fonts/arial.ttf
				fontFile= fileadmin/fonts/verdana.ttf
				fontSize = 7
				#fontSize = 8
                                                                #niceText = 1				
                                                                #antiAlias = 1 
		}
                                #15 = TEXT
                                #15 < .20
                                #15.fontColor = #3d6c89
                                #15.offset = 1,39
	}
	RO <.NO
	RO.10.fontColor = #FFA626
}

2.3. Bildermenü (ohne Text)
Oft will man nur aus Bildern eine Navigation bauen, zB für ein Servicemenü (aus Icons) oder wenn Grafiken nicht mittels Gifbuilder erstellt werden (können). Um Bilder einer Seite zuweisen zu können, stellt man den Seitentyp auf "Erweitert" um und kann unter "Dateien" Bilder hochladen.
Folgendes TS gibts als Beispiel hier zum Bewundern: http://www.bikeboard.ch/

temp.bildmenu= HMENU
temp.bildmenu {
  1 = GMENU
  1.noBlur = 1
  1.wrap = |
  1.NO = 1
  1.NO {
    imgParams = border="0"
    altImgResource.import = uploads/media/
    altImgResource.import.field = media
    # 0 steht für das 1. Bild in den Seiteneigenschaften
    altImgResource.import.listNum = 0
  }
  1.ACT < .1.NO
  1.ACT {
    # 1 steht für das 2. Bild in den Seiteneigenschaften (für den RO-Effekt)
    altImgResource.import.listNum = 1
  }
  1.RO < .1.ACT
}

.: 3. Kombination Text & Grafik :.
Manchmal will man in einem Menü eine Grafik und Text kombinieren und hier bietet sich folgender Code an. Das Bild wird, wie bei "2.3. Bildermenü (ohne Text)" in den Seiteneigenschaften hochgeladen.

temp.menu = HMENU
temp.menu {
	1 = TMENU
	1 {
		wrap = <div id="menu"><ul>|</ul></div>
		NO.allWrap = <li>|</li>
		NO.linkWrap = <div class="caption">|</div>

		NO.beforeImgLink = 1

		NO.beforeImg = GIFBUILDER
		NO.beforeImg {
			XY = [10.w],[10.h]
			10 = IMAGE
			10.file {
				import = uploads/media/
				import.field = media
				import.listNum = 0
			}
			# bild wird grau dargestellt wenn punkt nicht angewaehlt
			#30 = EFFECT
			#30.value = gray
		}

		NO.RO = 1
		NO.beforeROImg < .NO.beforeImg
		NO.beforeROImg {
			#30.value =
		}

		ACT < .NO
		ACT = 1
		ACT.linkWrap = <div class="caption-act">|</div>
		ACT.beforeImg {
			#30.value =
		}

		CUR < .ACT
		CUR = 1
	}
}

mögliches CSS dazu

/* MENU */
#menu ul {
padding:7px 0 0 0px;
}

#menu ul li {
text-align: center;
float: left;
list-style:none;
padding:0 10px;
}

#menu ul li .caption a, #menu ul li .caption a:link, #menu ul li .caption a:visited, #menu ul li .caption a:active {
color:#333;
text-decoration:none;
font-weight:bold;
font-size:15px;
}

#menu ul li .caption-act a, #menu ul li .caption-act a:link, #menu ul li .caption-act a:visited, #menu ul li .caption-act a:active {
text-decoration:none;
font-weight:bold;
font-size:15px;
color: #D01F3C;
}

.: 3. Sonstiges :.
Hier findest du alle sonstigen praktischen Menüs

3.1. Browse-Menü
Dieses Menü generiert einen Link zur nächsten/vorigen Seite. weitere Infos gibts in der TsRef hier und hier.

temp.prevPage = HMENU
temp.prevPage {
	special = browse
	special{
		items = prev|next
		prev.fields.title = <img src="fileadmin/dev/pics/zurueck.gif" title="vorige Seite" alt="vorige Seite"/>
		next.fields.title = <img src="fileadmin/dev/pics/weiter.gif" title="naechste Seite" alt="naechste Seite" />
	}
	1 = TMENU
	1.NO {
    		linkWrap =    |
	}
}

3.2. Breadcrumb-Menü
Dieses Menü dient dazu, den Pfad anzuzeigen. Erklärungen zur Range gibt es hier

temp.breadmenu = HMENU
temp.breadmenu {
	special = rootline
	special.range = 0|-1
	1 = TMENU
	1 {
		NO.linkWrap = &_nbsp;|&_nbsp;&_gt;
		CUR = 1
		CUR.linkWrap = <span class="breadAct">&_nbsp;|&_nbsp;</span>
		CUR.doNotLinkIt = 1
	}
}

* Unterstriche (_) entfernen!

3.3. Spacer-Menü
Seiten vom Typ Abstand (Spacer) werden als Trennung eingesetzt und so kann das ca. ausschauen. Ein ausführlicheres HowTo gibts hier: http://www.mcuniverse.com/Spacer-Page.75.0.html

temp.menu= HMENU
temp.menu{
        1 = TMENU
        1.wrap= <ul>|</ul>
        1.noBlur = 1
       
        1.NO = 1
        1.NO.ATagTitle.field = title
        1.NO.wrapItemAndSub= <li>|</li>
       
        1.SPC = 1
        # doNotShoLink if needed or not
        1.SPC.doNotShowLink = 1
        1.SPC.allWrap = <div style="padding:10px 0;">|</div> 
}

3.4. Ypslide-Menü
Diese Menüs sind nicht so einfach zum konfigurieren, aber ein HowTo gibts hier: http://typo3.intervation.de/snippets/menues/ypslideoutmenu.html

3.5. Zweite Menüebene an einer anderen Stelle
siehe #25103

3.6. Service-Menü
Ein Service-Menü ist ein normales TMENU, das alle Seiten einer Seite (zB Kontakt, Impressum,..) anzeigt, getrennt mit einem Zeichen in der mitte, zB |

lib.serviceMenu = HMENU
lib.serviceMenu {
	special = directory
	special.value = 41
	1 = TMENU
	1.noBlur = 1
	1.NO {
		linkWrap = &_nbsp;|&_nbsp;&_#124;|*|&_nbsp;|&_nbsp;&_#124;|*|&_nbsp;| 
		stdWrap.htmlSpecialChars = 1
		ATagTitle.field = title
	}
}

Die &_ müssen durch & ersetzt werden!