TYPO3-Testaccount
Testen Sie die aktuelle TYPO3 Version 4.4.2 kostenlos und unverbindlich für einen Monat!

jetzt testen

Schulungen

jetzt buchen
Forum » TypoScript » Menüs

[Geschlossen] Die wichtigsten Menüs in TYPO3 auf einem Blick


Autor Nachricht
Verfasst am: 11. 07. 2007 [17:42]
just2b
TYPO3-Gott
Moderator
Themenersteller
Dabei seit: 04.08.2004
Beiträge: 19047
 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.0icon_cool.gif!

- 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
=> TYPO3 - inspiring people to share <= aber kein Support per PM!

=> in eigener Sache: · inspiring people to share your location Trag dich in die TYPO3 Weltkarte ein und zeige wie groß die TYPO3 Community ist - vielen Dank!<=
ProfilWWW
Verfasst am: 11. 07. 2007 [17:43]
just2b
TYPO3-Gott
Moderator
Themenersteller
Dabei seit: 04.08.2004
Beiträge: 19047
 .: 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/
TYPOSCRIPT
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 ).
TYPOSCRIPT
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
=> TYPO3 - inspiring people to share <= aber kein Support per PM!

=> in eigener Sache: · inspiring people to share your location Trag dich in die TYPO3 Weltkarte ein und zeige wie groß die TYPO3 Community ist - vielen Dank!<=
ProfilWWW
Verfasst am: 11. 07. 2007 [17:55]
just2b
TYPO3-Gott
Moderator
Themenersteller
Dabei seit: 04.08.2004
Beiträge: 19047
 .: 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/
TYPOSCRIPT
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/
TYPOSCRIPT
temp.mainMenuG = HMENU
temp.mainMenuG {
 
	1=GMENU
	1 { 
                expAll = 1
		noBlur = 1
		NO = 1    
		NO {
			allWrap = |
			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/

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

=> TYPO3 - inspiring people to share <= aber kein Support per PM!

=> in eigener Sache: · inspiring people to share your location Trag dich in die TYPO3 Weltkarte ein und zeige wie groß die TYPO3 Community ist - vielen Dank!<=
ProfilWWW
Verfasst am: 11. 07. 2007 [18:09]
just2b
TYPO3-Gott
Moderator
Themenersteller
Dabei seit: 04.08.2004
Beiträge: 19047
 .: 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.
TYPOSCRIPT
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;
}

=> TYPO3 - inspiring people to share <= aber kein Support per PM!

=> in eigener Sache: · inspiring people to share your location Trag dich in die TYPO3 Weltkarte ein und zeige wie groß die TYPO3 Community ist - vielen Dank!<=
ProfilWWW
Verfasst am: 11. 07. 2007 [18:26]
just2b
TYPO3-Gott
Moderator
Themenersteller
Dabei seit: 04.08.2004
Beiträge: 19047
 .: 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.
TYPOSCRIPT
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
TYPOSCRIPT
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
TYPOSCRIPT
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 http://www.typo3.net/forum/list/list_post//25103/?howto=1

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 |
TYPOSCRIPT
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!

=> TYPO3 - inspiring people to share <= aber kein Support per PM!

=> in eigener Sache: · inspiring people to share your location Trag dich in die TYPO3 Weltkarte ein und zeige wie groß die TYPO3 Community ist - vielen Dank!<=
ProfilWWW


Auf dieses Thema kann nur von Administratoren geantwortet werden.