Suche
Teilen
startseite » forum

Die wichtigsten Menüs in TYPO3 auf einem Blick [Gelöst]

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    11. 07. 2007, 17:42

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

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

    [b]Dieses HowTo beschäftigt sich ausdrücklich nicht mit[/b]
    - 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 [url=http://www.typo3.net/forum/list/list_post//39055/?howto=1]hier erklärt[/url]

    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
    [b]PS: Feedback & Dank gern per PM & Co[/b]

  • 1
  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    11. 07. 2007, 17:43

    [b][u].: 1. Text-Menüs (TMENU) :.[/u][/b]

    [b]1.1. Simples Listenmenü[/b]
    Das Menü kann sehr einfach über CSS gestyled werden und ist barrierefrei. Einige Möglichkeiten sind hier sichtbar: http://css.maxdesign.com.au/listamatic/
    [TS]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>
    }
    }[/TS]

    [b]1.2. Dropdownmenü[/b]
    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 ).
    [TS]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>
    }[/TS]

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

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    11. 07. 2007, 17:55

    [u][b].: 2. Grafische Menüs (GMENU) :.[/b][/u]

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

    Folgendes TS gibts als Beispiel hier zum Bewundern: http://www.expression-dance.com/
    [TS]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
    }
    }[/TS]

    [b]2.2. Grafisches Menü mit Untertitel[/b]
    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/
    [TS]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
    }[/TS]

    [b]2.3. Bildermenü (ohne Text)[/b]
    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/

    [TS]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
    }[/TS]

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    11. 07. 2007, 18:09

    [b][u].: 3. Kombination Text & Grafik :.[/u][/b]
    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.
    [TS]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
    }
    }[/TS]
    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;
    }

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    11. 07. 2007, 18:26

    [b][u].: 3. Sonstiges :.[/u][/b]
    Hier findest du alle sonstigen praktischen Menüs

    [b]3.1. Browse-Menü[/b]
    Dieses Menü generiert einen Link zur nächsten/vorigen Seite. weitere Infos gibts in der TsRef [url=http://www.typo3.net/tsref/cobject/hmenu/]hier[/url] und [url=http://typo3.org/documentation/document-library/references/doc_core_tsref/4.1.0/view/8/11/#id3651051]hier[/url].
    [TS]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 = |
    }
    }
    [/TS]

    [b]3.2. Breadcrumb-Menü[/b]
    Dieses Menü dient dazu, den Pfad anzuzeigen. Erklärungen zur Range gibt es [url=http://typo3.org/documentation/document-library/references/doc_core_tsref/4.1.0/view/8/11/#id3651051]hier[/url]
    [TS]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
    }
    }[/TS]
    * Unterstriche (_) entfernen!

    [b]3.3. Spacer-Menü[/b]
    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
    [TS]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>
    } [/TS]

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

    [b]3.5. Zweite Menüebene an einer anderen Stelle[/b]
    siehe http://www.typo3.net/forum/list/list_post//25103/?howto=1

    [b]3.6. Service-Menü[/b]
    Ein Service-Menü ist ein normales TMENU, das alle Seiten einer Seite (zB Kontakt, Impressum,..) anzeigt, getrennt mit einem Zeichen in der mitte, zB |
    [TS]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
    }
    }[/TS]
    Die &_ müssen durch & ersetzt werden!

  • 1
Präsentiert von