TMENU mit RO, ACT und Hintergrund-Link [Gelöst]

  • spinne84 spinne84
    T3PO
    0 x
    29 Beiträge
    0 Hilfreiche Beiträge
    04. 04. 2007, 09:10

    Hallo,

    ich möchte ein Menü erstellen, das aussieht wie das hier -> [url]http://ec-net.de/[/url]

    Ich möchte es wegen den Suchmaschinen mit einem TMENU realisieren.
    ich habe auch schon einen ansatz in TypoScript hinbekommen:
    [TS]# Menü auf der linken Seite
    MENU_LINKS = HMENU
    MENU_LINKS {
    special = directory
    special.value = 18
    entryLevel = 1
    1 = TMENU
    1 {
    NO {
    ATagParams = class="ersteNO"
    beforeImg = fileadmin/Images/navigation/navi_1.gif
    after.cObject = IMAGE
    after.cObject {
    file.import.field = media
    file.import = uploads/media/
    file.import.listNum = 0
    }
    allWrap = <table width="200" height="12" border="0" cellspacing="1" cellpadding="2"><tr><td bgcolor="#a17220" align="left">| </td></tr></table>
    }
    # Aktiven Zustand der 1.Ebene des Menüs beschreiben
    ACT = 1
    ACT {
    ATagParams = class="ersteACT"
    beforeImg = fileadmin/Images/navigation/navi_1_1.gif
    after.cObject = IMAGE
    after.cObject {
    file.import.field = media
    file.import = uploads/media/
    file.import.listNum = 0
    }
    allWrap = <table width="200" height="12" border="0" cellspacing="1" cellpadding="2"><tr><td bgcolor="#a17220" align="left">| </td></tr></table>
    }
    # Einen RollOver-Zustand beschreiben
    RO = 1
    RO {
    backColor = #845608
    }
    }

    # Die zweite Ebene als Kopie der ersten Ebene beschreiben
    2 < .1
    2 {
    NO {
    ATagParams = class="zweiteNO"
    beforeImg = fileadmin/Images/navigation/navi_2_1.gif
    after.cObject = IMAGE
    after.cObject {
    file.import.field = media
    file.import = uploads/media/
    file.import.listNum = 0
    }
    allWrap = <table width="200" height="12" border="0" cellspacing="1" cellpadding="2"><tr><td bgcolor="#a17220" align="left">| </td></tr></table>
    }
    # Aktiven Zustand der 2.Ebene des Menüs beschreiben
    ACT = 2
    ACT {
    ATagParams = class="zweiteACT"
    beforeImg = fileadmin/Images/navigation/navi_2.gif
    after.cObject = IMAGE
    after.cObject {
    file.import.field = media
    file.import = uploads/media/
    file.import.listNum = 0
    }
    allWrap = <table width="200" height="12" border="0" cellspacing="1" cellpadding="2"><tr><td bgcolor="#a17220" align="left">| </td></tr></table>
    }
    }
    }
    [/TS]

    Doch leider hab ich da noch Probleme, dass der Roll-Over Befehl nicht funktioniert und das der Link nur funktioniert wenn ich über den Text fahre und nicht mit dem dem Hintergrund.

    Gruß Spinne84


  • 1
  • johanness johanness
    Jedi-Ratsmitglied
    0 x
    916 Beiträge
    0 Hilfreiche Beiträge
    04. 04. 2007, 09:21

    Ichf würde das grundsätzlich anders angehen: Nicht mit Tabellen, sondern durch reine über CSS gesteuerte Listen (ul- und li-Tags). Du tust dich auf Dauer leichter und es ist moderner.
    Da kannst du dann all deine Effekte über CSS steuern. Und beachte, dass der IE nicht alles kann, was der firefox kann (Hover-Effekt-Fläche). Also schau dir mal dein aktuelles Projekt im FF an.

  • johanness johanness
    Jedi-Ratsmitglied
    0 x
    916 Beiträge
    0 Hilfreiche Beiträge
    04. 04. 2007, 09:24

    Nur ein Submenü hatte ich mit CSS mal so gelöst, falls du da nicht so fit sein solltest:
    [TS]temp.subNavTemplate = HMENU
    temp.subNavTemplate {
    entryLevel = 1
    1 = TMENU
    1 {
    NO = 1
    NO.ATagParams = class="sub"
    NO.linkWrap = <li> | </li>

    RO < .NO
    RO.ATagParams = class="sub_active"

    ACT < .RO
    }
    }
    [/TS]

    [HTML]/* Untermenu */
    #sub {
    width: 120px;
    border-bottom: 1px solid #F6B762;
    }
    ul, li {
    display: inline;
    margin: 0px;
    padding: 0px;
    }
    .sub {
    display: block;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    color: #333;
    background: #inherit;
    line-height: 20px;
    font-size: 11px;
    text-decoration: none;
    text-align: center;
    border-top: 1px solid #F6B762;
    border-right: 10px solid #FEA046;
    }
    .sub:hover {
    color: #333;
    background: #B0DDF3;
    text-decoration: none;
    border-right: 10px solid #8ACFF2;
    }
    .sub_active {
    display: block;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    color: #333;
    background: #B0DDF3;
    line-height: 20px;
    font-size: 11px;
    text-decoration: none;
    text-align: center;
    border-right: 10px solid #8ACFF2;
    border-top: 1px solid #F6B762;
    }
    [/HTML]

    Über Hintergrundbilder- und farben kannst du das wunderbar lösen!

  • Tevsa Tevsa
    Sternenflotten-Admiral
    0 x
    171 Beiträge
    5 Hilfreiche Beiträge
    04. 04. 2007, 09:40

    Das mit dem Hintergrund funktioniert prima, wenn du die <A>-Tag mit dem entsprechenden css belegst:
    [HTML].namederclasse{
    dispalay: block; /* wichtig sonst kann man keinen Höhe / breite angeben */
    width: 120px;
    height:30px;
    background-color:#f00;
    ...

    }
    [/HTML]

    Hoffe der ansatz hilft ein wenig

    Lieben gruß
    Tevsa

    Irgend etwas is' ja immer...

  • spinne84 spinne84
    T3PO
    0 x
    29 Beiträge
    0 Hilfreiche Beiträge
    04. 04. 2007, 10:04

    Vielen Dank für die schnelle Hilfe!!!

    Mit CSS bin ich nicht so vertraut, da muss ich mich erst einlesen. Gibts da etwas gutes?

    Gruß Spinne84

  • spinne84 spinne84
    T3PO
    0 x
    29 Beiträge
    0 Hilfreiche Beiträge
    04. 04. 2007, 13:12

    Also ich habe das Menü jetzt mit <li> erzeugt.
    Ich möchte vor jeden Menüpunkt ein kleines Symbol setzen.
    Doch jetzt erscheint für jedes symbol eine extra Zeile. #angry#
    Ich schaff es einfach nicht, das Bild und den text in eine Zeile zu bringen!

    Hier mein TypoScript und CSS Code:

    [TS]# Menü auf der linken Seite
    MENU_LINKS = HMENU
    MENU_LINKS {
    special = directory
    special.value = 18
    entryLevel = 1
    1 = TMENU
    1 {
    NO {
    ATagParams = class="sub"
    beforeImg = fileadmin/Images/navigation/navi_1.gif
    after.cObject = IMAGE
    after.cObject {
    file.import.field = media
    file.import = uploads/media/
    file.import.listNum = 0
    }
    #allWrap = <table width="200" height="12" border="0" cellspacing="1" cellpadding="2"><tr><td bgcolor="#a17220" align="left">&#160;&#160;| </td></tr></table>
    #allWrap = <table border="0" cellspacing="1" cellpadding="2"><tr><td>&#160;&#160;| </td></tr></table>
    allWrap = <li> | </li>
    }
    # Aktiven Zustand der 1.Ebene des Menüs beschreiben
    ACT = 1
    ACT {
    ATagParams = class="sub_ACT"
    beforeImg = fileadmin/Images/navigation/navi_1_1.gif
    after.cObject = IMAGE
    after.cObject {
    file.import.field = media
    file.import = uploads/media/
    file.import.listNum = 0
    }
    #allWrap = <table width="200" height="12" border="0" cellspacing="1" cellpadding="2"><tr><td bgcolor="#a17220" align="left">&#160;&#160;| </td></tr></table>
    #allWrap = <table border="0" cellspacing="1" cellpadding="2"><tr><td>&#160;&#160;| </td></tr></table>
    allWrap = <li> | </li>
    }
    }

    # Die zweite Ebene als Kopie der ersten Ebene beschreiben
    2 < .1
    2 {
    NO {
    ATagParams = class="sub2"
    beforeImg = fileadmin/Images/navigation/navi_2_1.gif
    after.cObject = IMAGE
    after.cObject {
    file.import.field = media
    file.import = uploads/media/
    file.import.listNum = 0
    }
    #allWrap = <table width="200" height="12" border="0" cellspacing="1" cellpadding="2"><tr><td bgcolor="#a17220" align="left">&#160;&#160;| </td></tr></table>
    #allWrap = <table border="0" cellspacing="1" cellpadding="2"><tr><td>&#160;&#160;| </td></tr></table>
    allWrap = <li> | </li>
    }
    # Aktiven Zustand der 2.Ebene des Menüs beschreiben
    ACT = 2
    ACT {
    ATagParams = class="sub2_ACT"
    beforeImg = fileadmin/Images/navigation/navi_2.gif
    after.cObject = IMAGE
    after.cObject {
    file.import.field = media
    file.import = uploads/media/
    file.import.listNum = 0
    }
    #allWrap = <table width="200" height="12" border="0" cellspacing="1" cellpadding="2"><tr><td bgcolor="#a17220" align="left">&#160;&#160;| </td></tr></table>
    #allWrap = <table border="0" cellspacing="1" cellpadding="2"><tr><td>&#160;&#160;| </td></tr></table>
    allWrap = <li> | </li>
    }
    }
    }
    [/TS]

    1. ul, li {
    2. display: inline;
    3. margin: 0px;
    4. padding: 0px;
    5. }
    6.  
    7. /* ---- sub ist die erste Menüebene auf der linken Seite ---- */
    8. #sub {
    9. width: 200px;
    10. }
    11.  
    12. .sub {
    13. display: block;
    14. margin: 0px;
    15. padding: 0px 0px 0px 0px;
    16. color: #333;
    17. background: #inherit;
    18. line-height: 20px;
    19. font: normal 12px Verdana;
    20. text-decoration: none;
    21. text-align: left;
    22. }
    23.  
    24. .sub:hover {
    25. color: #FFFFFF;
    26. background: #845608;
    27. text-decoration: none;
    28. }
    29.  
    30. .sub_ACT {
    31. display: block;
    32. margin: 0px;
    33. padding: 0px 0px 0px 0px;
    34. color: #FFFFFF;
    35. background: #845608;
    36. font: normal 12px Verdana;
    37. text-decoration: none;
    38. text-align: left;
    39. }
    40.  
    41. /* ---- sub ist die erste Menüebene auf der linken Seite ENDE---- */

  • just2b just2b
    TYPO3-Yoda
    0 x
    18741 Beiträge
    2 Hilfreiche Beiträge
    04. 04. 2007, 16:08

    Hallo,

    ein paar dinge:
    - statt allWrap bitte wrapItemAndSub verwenden
    - das Bild definierst du im CSS, zB so:

    background: #ff0033 url(deinbild.gif) no-repeat left;

    georg

  • spinne84 spinne84
    T3PO
    0 x
    29 Beiträge
    0 Hilfreiche Beiträge
    05. 04. 2007, 13:30

    Vielen Dank für deinen super Tipp!!!
    Jetzt hat es endlich geklappt!

    DANKE!

  • johanness johanness
    Jedi-Ratsmitglied
    0 x
    916 Beiträge
    0 Hilfreiche Beiträge
    07. 04. 2007, 01:28

    CSS solltest du ganz dringend vor Typo3 lernen ;-)

  • spinne84 spinne84
    T3PO
    0 x
    29 Beiträge
    0 Hilfreiche Beiträge
    11. 04. 2007, 12:51

    ;-) Das habe ich jetzt auch gemerkt... Danke! :D

  • 1