TMenü mit Stylesheets

Hallo,

ich habe die Geschichte mit den Wraps und CSS noch nicht so richtig verstanden, schätze ich. Was ich möchte:

Ein klassisches Horizontalmenü und die Untermenüs vertikal, also so:

Thema 1 | Thema 2 | Thema 3 | usw.
--------------------------------------------------------------
Unterpunkt 1
Unterpunkt 2
Detail 1
Detail 2
Unterpunkt 3

usw.

Mit reinen Textlinks kein Problem einschließlich der Statausanzeige der Links (Normal, Aktiv, Rollover). Nun möchte ich aber jeden Link in einer Tabellenzelle haben und es soll die ganze Zelle auf die Maus reagieren (zur Not mit Hintergrund-Grafiken). Ich nehme an, dass das relativ einfach über Wrap gelöst wird, aber ich bekomme es nicht gebacken.

Im Moment löse ich das mit einem GMenü, aber das ist ja vom Ergebnis völlig unnötig und verlangsamt nur den Menüaufbau erheblich.

Vielleicht hat jemand ein Beispielscript dazu.

Hilfesuchend ... <schnieef>
Carlos

Nach langem Suchen hier im Forum konnte ich mir die Antwort selbst stricken. Bis auf einen kleinen Fehler funktioniert alles.

Die verschiedensten Lösungsansätze machen es nicht gerade leicht, einen Tipp zu verstehen und nachzuvollziehen, weshalb ich in den Foren und Listen immer wieder finde "Bei mir funktioniert das so nicht". Es ist schön, wenn User helfen. Noch schöner wäre es, wenn sie nicht nur Codeschnipsel, sondern mal den ganzen Script veröffentlichen, weil manchmal die Ansätze schon vom Grundsatz unterschiedlich sind und Codefragmente dann nicht oder nur sehr bedingt weiterhelfen.

Also jetzt: Dieses Ergebnis wollte ich haben: http://web7.conserver02.de.

So sieht mein Typoscript aus:

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.bodyTag = <body bgcolor="#ffffff">
page.stylesheet = fileadmin/template/stylesheet.css
page.config.language = de

# Primärer Inhalt
page.10 = TEMPLATE
page.10 {
  template = FILE
  template.file = fileadmin/template/template.html
  workOnSubpart = WEBSEITE
  marks.RECHTS < styles.content.getRight
  marks.INHALT < styles.content.get
  marks.INHALT.select.orderBy = sorting

# Hauptmenü

  marks.MENUE = HMENU
  marks.MENUE.entryLevel = 0
  marks.MENUE.1 = TMENU
  marks.MENUE.1 {
    expAll = 1
    wrap = <table border="0" cellspacing="0" cellpadding="0"><tr> | </tr></table>
    NO {
      allWrap = <td> |</td>
      ATagBeforeWrap = 1
      ATagParams = class="menue1"
    }
    ACT = 1
    ACT {
      allWrap = <td>|</td>
      ATagBeforeWrap = 1
      ATagParams = class="menue1_active"
    }
  }

# Untermenu

  marks.MENUE2 = HMENU
  marks.MENUE2.entryLevel = 1
  marks.MENUE2.1 = TMENU
  marks.MENUE2.1 {
    expAll = 0
    wrap = <table border="0" cellspacing="0" cellpadding="0"> | </table>
    NO {
      allWrap = <tr><td> | </td></tr>
      ATagBeforeWrap = 1
      ATagParams = class="menue2"
    }
    ACT = 1
    ACT {
      allWrap = <tr><td> | </td></tr>
      ATagBeforeWrap = 1
      ATagParams = class="menue2_active"
    }
  }

# Untermenüs in zweiter Ebene

  marks.MENUE2.2 = TMENU
  marks.MENUE2.2 {
    expAll = 0
    NO {
      allWrap = <tr><td> | </td></tr>
      ATagBeforeWrap = 1
      ATagParams = class="menue2_2"
    }
    ACT = 1
    ACT {
      allWrap = <tr><td> | </td></tr>
      ATagBeforeWrap = 1
      ATagParams = class="menue2_2_active"
    }
  }
}

Das sind die entsprechenden Teile aus dem Stylesheet:

.menue1:link   { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #c0c0c0; padding-top: 1px; padding-left: 2px; border-left: 1px solid white; width: 60px; height: 15px }
.menue2:link  { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #c0c0c0; padding-top: 1px; padding-left: 2px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_2:link { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #c0c0c0; padding-top: 1px; padding-left: 15px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_2:visited { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #c0c0c0; padding-top: 1px; padding-left: 15px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_2:hover { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #f00; padding-top: 1px; padding-left: 15px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_2:active { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 15px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_2_active:active { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 15px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_2_active:link { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 15px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_2_active:hover { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 15px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_2_active:visited { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 15px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_active:link { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 2px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_active:hover { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 2px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_active:active { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 2px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2_active:visited { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 2px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2:hover { color: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #f00; padding-top: 1px; padding-left: 2px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2:active { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 2px; border-top: 1px solid white; width: 120px; height: 15px }
.menue2:visited { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #c0c0c0; padding-top: 1px; padding-left: 2px; border-top: 1px solid white; width: 120px; height: 15px }
.menue1_active:link  { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 2px; border-left: 1px solid white; width: 60px; height: 15px }
.menue1:visited  { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #c0c0c0; padding-top: 1px; padding-left: 2px; border-left: 1px solid white; width: 60px; height: 15px }
.menue1_active:visited  { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 2px; border-left: 1px solid white; width: 60px; height: 15px }
.menue1:hover   { color: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #f00; padding-top: 1px; padding-left: 2px; border-left: 1px solid white; width: 60px; height: 15px }
.menue1_active:hover  { color: white; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 2px; border-left: 1px solid white; width: 60px; height: 15px }
.menue1:active  { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 2px; border-left: 1px solid white; width: 60px; height: 15px }
.menue1_active:active  { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; background-color: #ffa500; padding-top: 1px; padding-left: 2px; border-left: 1px solid white; width: 60px; height: 15px }

Möglicherweise ein bisschen umständlich gelöst, aber es tut, was es soll.

Fast.

Denn leider wird die Hover-Funktion (also rote Zellen) nicht bei den Untermenüs ausgeführt, wenn der Link bereits besucht wurde. Beim Hauptmenü ist das nicht der Fall - und ich finde meinen Fehler nicht.

Vielleicht hat jemand dazu einen Tipp.

Hallo,

dein letztes Problem müsste doch was mit dem zu tun haben, was du für visited definiert hast. Vielleicht mal keine Hintergrundfarbe für visited angeben?

Davon abgesehen, ich suche auch schon länger nach einer Möglichkeit, die ganze Zelle auf Mouseover einzufärben und finde diese hier nicht akzeptabel, weil das mal wieder nur im IE gut aussieht.

Hast du dir mal angesehen, wie die ewigen Spielverderber das interpretieren?

Gruß
Christine

Hallo Christine,

ja, habe ich gesehen, aber hatte noch keine Zeit zur Änderung. Das müsste sich aber eigentlich durch eine Grafik in der Zelle beheben lassen.

Es ist schon ein Kreuz ... 😉