Mittwald CM Service: TYPO3-Hosting, TYPO3-Schulungen, Agenturpakete, Managed-Server
Optimiertes TYPO3 Hosting von Mittwald CM Service
FORUM » TypoScript » Menüs

[geschlossen] [HowTo] Die wichtigsten Menüs in TYPO3 auf einem Blick wurde Beantwortet

Autor Nachricht
Verfasst am: 11.07.2007 [17:42]
just2b

[Moderator]
[Themenersteller]
dabei seit: 04.08.2004
Beiträge: 18910
über 5000 Posts über 10000 Posts über 15000 Posts		 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
⇒ 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!⇐
Verfasst am: 11.07.2007 [17:43]
just2b

[Moderator]
[Themenersteller]
dabei seit: 04.08.2004
Beiträge: 18910
über 5000 Posts über 10000 Posts über 15000 Posts		 .: 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:Zeilennummerierung:  An / Aus

  1. temp.menu = HMENU
  2. temp.menu {
  3.         1 = TMENU
  4.         1 {
  5.                 #expAll =1
  6.                 wrap = <ul id="nav1">|</ul>
  7.                 noBlur = 1
  8.                 NO = 1
  9.                 NO {
  10.                         wrapItemAndSub = <li>|</li>
  11.                         stdWrap.htmlSpecialChars = 1
  12.                         ATagTitle.field = title
  13.                 }
  14.                 ACT <.NO
  15.                 ACT {
  16.                         wrapItemAndSub = <li id="nav1act">|</li>
  17.                 }
  18.         }
  19.        
  20.         2 < .1
  21.         2 {
  22.                 wrap = <ul id="nav2">|</ul>
  23.                 ACT.wrapItemAndSub = <li id="nav2act">|</li>
  24.         }
  25.        
  26.         3 < .2
  27.         3 {
  28.                 wrap = <ul id="nav3">|</ul>
  29.                 ACT.wrapItemAndSub = <li id="nav3act">|</li>
  30.         }
  31. }


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:Zeilennummerierung:  An / Aus

  1. temp.dropdownmenu= HMENU
  2. temp.dropdownmenu {
  3.   wrap = <form action=""><p><select onchange="window.location=this.options[this.selectedIndex].value"><option value="">Seitenauswahl</option>|</select></p></form>
  4.   1 = TMENU
  5.   1 {
  6.     expAll = 1
  7.     NO {
  8.       doNotLinkIt = 1
  9.       stdWrap.cObject = COA
  10.       stdWrap.cObject {
  11.         10 = TEXT
  12.         10 {
  13.           wrap = <option value="{getIndpEnv:TYPO3_SITE_URL}|">
  14.           insertData = 1
  15.           typolink {
  16.             parameter.field = uid
  17.             returnLast = url
  18.           }
  19.         }
  20.         20 = TEXT
  21.         20 {
  22.            field = subtitle//title
  23.            wrap =  |</option>
  24.         }
  25.       }
  26.     }
  27.     ACT <.NO
  28.     ACT = 1
  29.     ACT.stdWrap.cObject.10.wrap = <option selected="selected" value="{getIndpEnv:TYPO3_SITE_URL}|">
  30.   }
  31.   2 < .1
  32.   2.NO.stdWrap.cObject.20.wrap = --|</option>
  33.   3 < .1
  34.   3.NO.stdWrap.cObject.20.wrap = ----|</option>
  35.   4 < .1
  36.   4.NO.stdWrap.cObject.20.wrap = ------|</option>
  37.   5 < .1
  38.   5.NO.stdWrap.cObject.20.wrap = --------|</option>
  39. }


{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!⇐
Verfasst am: 11.07.2007 [17:55]
just2b

[Moderator]
[Themenersteller]
dabei seit: 04.08.2004
Beiträge: 18910
über 5000 Posts über 10000 Posts über 15000 Posts		 .: 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:Zeilennummerierung:  An / Aus

  1. temp.grafischMenu = HMENU
  2. temp.grafischMenu {
  3.  
  4.         1=GMENU
  5.         1 {
  6.                 expAll = 1
  7.                 noBlur = 1
  8.  
  9.                 NO = 1   
  10.                 NO {
  11.                         transparentBackground = 1
  12.                         ATagTitle.field = title
  13.                         XY=[10.w]+10,24
  14.  
  15.                         5 = IMAGE
  16.                         5.file = fileadmin/menuBG.jpg      
  17.  
  18.                         10=TEXT
  19.                         10 {
  20.                                 text.field=title
  21.                                 offset=1,20
  22.                                 fontColor=#FFFFFF
  23.                                 fontFile=fileadmin/fonts/FloraICG.ttf
  24.                                 fontSize=18   
  25.                         }
  26.                 }
  27.                 ACT <.NO
  28.                 ACT.10.fontColor = #BF2236
  29.  
  30.                 RO <.NO
  31.                 RO.10.fontColor = #BF2236
  32.  
  33.                 ACTRO <.RO
  34.         }
  35. }


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:Zeilennummerierung:  An / Aus

  1. temp.mainMenuG = HMENU
  2. temp.mainMenuG {
  3.  
  4.         1=GMENU
  5.         1 {
  6.                 expAll = 1
  7.                 noBlur = 1
  8.                 NO = 1   
  9.                 NO {
  10.                         allWrap = |
  11.                         backColor = #158ebd
  12.                         transparentBackground = 1
  13.                         XY = [10.w]+80, 52
  14.                         10=TEXT
  15.                         10 {
  16.                                 text.align = right
  17.                                 text.field = title
  18.                                 text.case = upper
  19.                                 offset= 75,25
  20.                                 fontColor = #FFFFFF
  21.                                 fontFile= fileadmin/fonts/GOTHICB.TTF
  22.                                 fontSize= 17 
  23.                                 #antiAlias = 1   
  24.                         }              
  25.                 20 = TEXT
  26.                 20 {
  27.                                 text.align = right
  28.                                 text.field= subtitle
  29.                                 text.case = upper
  30.                                 offset = [10.w]-[20.w]+75,38
  31.                                 fontColor = #FFFFFF
  32.                                 fontFile= fileadmin/fonts/arial.ttf
  33.                                 fontFile= fileadmin/fonts/verdana.ttf
  34.                                 fontSize = 7
  35.                                 #fontSize = 8
  36.                                                                 #niceText = 1            
  37.                                                                 #antiAlias = 1
  38.                 }
  39.                                 #15 = TEXT
  40.                                 #15 < .20
  41.                                 #15.fontColor = #3d6c89
  42.                                 #15.offset = 1,39
  43.         }
  44.         RO <.NO
  45.         RO.10.fontColor = #FFA626
  46. }


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:Zeilennummerierung:  An / Aus

  1. temp.bildmenu= HMENU
  2. temp.bildmenu {
  3.   1 = GMENU
  4.   1.noBlur = 1
  5.   1.wrap = |
  6.   1.NO = 1
  7.   1.NO {
  8.     imgParams = border="0"
  9.     altImgResource.import = uploads/media/
  10.     altImgResource.import.field = media
  11.     # 0 steht für das 1. Bild in den Seiteneigenschaften
  12.     altImgResource.import.listNum = 0
  13.   }
  14.   1.ACT < .1.NO
  15.   1.ACT {
  16.     # 1 steht für das 2. Bild in den Seiteneigenschaften (für den RO-Effekt)
  17.     altImgResource.import.listNum = 1
  18.   }
  19.   1.RO < .1.ACT
  20. }

⇒ 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!⇐
Verfasst am: 11.07.2007 [18:09]
just2b

[Moderator]
[Themenersteller]
dabei seit: 04.08.2004
Beiträge: 18910
über 5000 Posts über 10000 Posts über 15000 Posts		 .: 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:Zeilennummerierung:  An / Aus

  1. temp.menu = HMENU
  2. temp.menu {
  3.         1 = TMENU
  4.         1 {
  5.                 wrap = <div id="menu"><ul>|</ul></div>
  6.                 NO.allWrap = <li>|</li>
  7.                 NO.linkWrap = <div class="caption">|</div>
  8.  
  9.                 NO.beforeImgLink = 1
  10.  
  11.                 NO.beforeImg = GIFBUILDER
  12.                 NO.beforeImg {
  13.                         XY = [10.w],[10.h]
  14.                         10 = IMAGE
  15.                         10.file {
  16.                                 import = uploads/media/
  17.                                 import.field = media
  18.                                 import.listNum = 0
  19.                         }
  20.                         # bild wird grau dargestellt wenn punkt nicht angewaehlt
  21.                         #30 = EFFECT
  22.                         #30.value = gray
  23.                 }
  24.  
  25.                 NO.RO = 1
  26.                 NO.beforeROImg < .NO.beforeImg
  27.                 NO.beforeROImg {
  28.                         #30.value =
  29.                 }
  30.  
  31.                 ACT < .NO
  32.                 ACT = 1
  33.                 ACT.linkWrap = <div class="caption-act">|</div>
  34.                 ACT.beforeImg {
  35.                         #30.value =
  36.                 }
  37.  
  38.                 CUR < .ACT
  39.                 CUR = 1
  40.         }
  41. }

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!⇐
Verfasst am: 11.07.2007 [18:26]
just2b

[Moderator]
[Themenersteller]
dabei seit: 04.08.2004
Beiträge: 18910
über 5000 Posts über 10000 Posts über 15000 Posts		 .: 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:Zeilennummerierung:  An / Aus

  1. temp.prevPage = HMENU
  2. temp.prevPage {
  3.         special = browse
  4.         special{
  5.                 items = prev|next
  6.                 prev.fields.title = <img src="fileadmin/dev/pics/zurueck.gif" title="vorige Seite" alt="vorige Seite"/>
  7.                 next.fields.title = <img src="fileadmin/dev/pics/weiter.gif" title="naechste Seite" alt="naechste Seite" />
  8.         }
  9.         1 = TMENU
  10.         1.NO {
  11.             linkWrap =    |
  12.         }
  13. }


3.2. Breadcrumb-Menü
Dieses Menü dient dazu, den Pfad anzuzeigen. Erklärungen zur Range gibt es hier
Typoscript:Zeilennummerierung:  An / Aus

  1. temp.breadmenu = HMENU
  2. temp.breadmenu {
  3.         special = rootline
  4.         special.range = 0|-1
  5.         1 = TMENU
  6.         1 {
  7.                 NO.linkWrap = &_nbsp;|&_nbsp;&_gt;
  8.                 CUR = 1
  9.                 CUR.linkWrap = <span class="breadAct">&_nbsp;|&_nbsp;</span>
  10.                 CUR.doNotLinkIt = 1
  11.         }
  12. }

* 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:Zeilennummerierung:  An / Aus

  1. temp.menu= HMENU
  2. temp.menu{
  3.         1 = TMENU
  4.         1.wrap= <ul>|</ul>
  5.         1.noBlur = 1
  6.        
  7.         1.NO = 1
  8.         1.NO.ATagTitle.field = title
  9.         1.NO.wrapItemAndSub= <li>|</li>
  10.        
  11.         1.SPC = 1
  12.         # doNotShoLink if needed or not
  13.         1.SPC.doNotShowLink = 1
  14.         1.SPC.allWrap = <div style="padding:10px 0;">|</div>
  15. }


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:Zeilennummerierung:  An / Aus

  1. lib.serviceMenu = HMENU
  2. lib.serviceMenu {
  3.         special = directory
  4.         special.value = 41
  5.         1 = TMENU
  6.         1.noBlur = 1
  7.         1.NO {
  8.                 linkWrap = &_nbsp;|&_nbsp;&_#124;|*|&_nbsp;|&_nbsp;&_#124;|*|&_nbsp;|
  9.                 stdWrap.htmlSpecialChars = 1
  10.                 ATagTitle.field = title
  11.         }
  12. }

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


Dieses Thema kann nur von Admins verwaltet werden

Impressum  | Kontakt  | TYPO3 Hosting  | TYPO3 Schulungen

  
TYPO3 Hosting in der Version 4.3.2 kostenlos bei Mittwald CM Service testen

TYPO3 4.3.2 jetzt testen

Testen Sie die neue TYPO3 Version 4.3.2 kostenlos für einen Monat


Entwicklerschulungen

  • Espelkamp:
    Mit., 17.03.10 - Fre., 19.03.10
  • Berlin:
    Mit., 21.04.10 - Fre., 23.04.10
  • Köln:
    Mon., 21.06.10 - Mit., 23.06.10