Textmenü mit Trenner-Grafik

Hallo zusammen,

ich möchte gerne mein Hauptmenü wie folgt anlegen:

Textmenü und dahinter als Trenner eine Grafik.

Folgenden Code von just2b habe ich verwendet (hier nur die Grundfassung, weil alle Änderungen meinerseits nicht zum gewünschten Ergebnis geführt haben)

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

Habe irgendwie ein Brett vor dem Kopf.

Momentan sieht es dann so aus: http://www.dragonbane.de

Ok, einen kleinen Schritt bin ich jetzt weiter gekommen. Wenigstens habe ich das css anpassen können.

Kann es sein, dass ich hier völlig auf dem falschen Dampfer bin? Ich habe mir verschiedene andere Codes angeschaut und gesehen, dass man auch mit dem Spacer arbeiten kann. Dann müsste ich aber im Backend jeweils eine Seite vom Typ Trenner einbauen, richtig?

Hallo Dragonbane,

du kannst doch auch - abhängig was es für eine Grafik ist - im CSS mit border-bottom arbeiten und im TS mit optionsplit.

Vielleicht hilft dir das auch!

Hallo,
vielen Dank für die Antwort.

Das Problem ist das es ja eine Grafik ist, die als Trenner funktioniert. In HTML ist das Menü natürlich so aufgebaut das erst der Text des Menüelements als Link geschrieben wird, also z.B. "Über Dragonbane" und dann danach der senkrechte Strich als Grafik eingebaut wird.

Mit optionsplit (und auch mit typoscript) kenne ich mich nicht so gut aus aber ich werde mich schlau machen.

Mh, ich habe es jetzt so gelöst:

# Main Navigation
  subparts.MAINNAV = HMENU
  subparts.MAINNAV.1 = TMENU
  subparts.MAINNAV.1 {
    NO.allWrap = <td>|</td><td><img src="fileadmin/templates/img/subpage1_02.jpg" alt="" width="13" height="59"></td>
    ACT = 1
    ACT.allWrap = <td>|</td><td><img src="fileadmin/templates/img/subpage1_02.jpg" alt="" width="13" height="59" /></td>
  }

Da ich immer noch nicht soviel von Typoscript verstehe, versuche ich mal eine Erklärung von oben:
Ich habe jeweils für den Normal- und Aktivzustand das Textmenüelement in ein Tabellenelement gesteckt und im Anschluss das Bild gesetzt.

Ist das so richtig beschrieben?

Ich habe gemerkt, dass vieles auch vom Template und dazugehörigem CSS abhängt. Ich konnte z.B. die Menüelemente mit dem richtigen Abstand positionieren aber z.B. wird die Schriftfarbe nicht geändert wie ich es im CSS bestimmt habe. Naja ich glaube das ist ein anderes Problem.

Viele Grüße
Dragonbane

Hallo Dragonbane,

ich dachte da eher an sowas hier:

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

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

anstelle von &_nbsp;&_#124; kannst du sicherlich auch per CSS und border-right arbeiten und da deine Grafik zuweisen.

Daniel

Hallo Daniel,

habe ich denn das TS so richtig beschrieben/verstanden?

anstelle von &_nbsp;&_#124; kannst du sicherlich auch per CSS und border-right arbeiten und da deine Grafik zuweisen.

Das verstehe ich nicht ganz. Den Ausdruck &_nbsp;&_#124; ersetze ich wie und womit?

Frohes neues Jahr zusammen,

ich habe es jetzt ganz billig mit Tabellenelementen gelöst. Hoffe bei der Überarbeitung und meinem nächsten Projekt das ganze etwas professioneller zu lösen.