TMENU mit RO, ACT und Hintergrund-Link

spinne84 · 4. April 2007 09:10

Hallo,

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

Ich möchte es wegen den Suchmaschinen mit einem TMENU realisieren.
ich habe auch schon einen ansatz in TypoScript hinbekommen:

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

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

johanness · 4. April 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 · 4. April 2007 09:24

Nur ein Submenü hatte ich mit CSS mal so gelöst, falls du da nicht so fit sein solltest:

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

/* 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;
	}

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

Tevsa · 4. April 2007 09:40

Das mit dem Hintergrund funktioniert prima, wenn du die <A>-Tag mit dem entsprechenden css belegst:

.namederclasse{
    dispalay: block;  /* wichtig sonst kann man keinen Höhe / breite angeben */
    width: 120px;
    height:30px;
   background-color:#f00;
...

}

Hoffe der ansatz hilft ein wenig

Lieben gruß
Tevsa

spinne84 · 4. April 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 · 4. April 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:

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

ul, li {
        display: inline;
        margin: 0px;
        padding: 0px;
}

/* ---- sub ist die erste Menüebene auf der linken Seite ---- */
#sub {
        width: 200px;
}
                
.sub {
        display: block;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        color: #333;
        background: #inherit;   
        line-height: 20px;
        font: normal 12px Verdana;
        text-decoration: none;
        text-align: left;
}
                
.sub:hover {
        color: #FFFFFF;
        background: #845608;
        text-decoration: none;  
}
                
.sub_ACT {
        display: block;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        color: #FFFFFF;
        background: #845608;
        font: normal 12px Verdana;     
        text-decoration: none;
        text-align: left;    
} 

/* ---- sub ist die erste Menüebene auf der linken Seite  ENDE---- */

just2b · 4. April 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 · 5. April 2007 13:30

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

DANKE!

johanness · 7. April 2007 01:28

CSS solltest du ganz dringend vor Typo3 lernen ;-)

spinne84 · 11. April 2007 12:51

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