Zum Inhalt springen

Hilfe bei aufwendigem grafischen Menüsystem

Erstellt am 11. Juli 2012 · 2 Antworten · letzte Antwort am 12. Juli 2012

Tags: Frage

akonze ·

Ich arbeite gerade an einem recht aufwendigen grafischen Menüsystem für Typo3. Zum besseren Verständnis habe ich hier mal eine Demo online:

http://www.odoo.tv/Survival.263.0.html

Das Menü arbeitet an sich schon sehr gut, allerdings möchte ich noch zwischen reinen Contentseiten und Verzeichnissen (sprich Seiten mit Unterseiten) unterscheiden. Textlich klappt das schon (siehe "Dir:" vor ersten Eintrag), nur grafisch noch nicht. Ich möchte dazu ein passendes Icon über das Bild des Menüsystems legen. Bisher habe das Foto wie folgt erzeugt:

  <div class="picmenuphoto" >
    <a href="#" > <img src="#" /></a>
  </div>

Bisher habe ich einfach das Foto mittels "before.cObject = IMAGE" vor den Menülink gelegt und dann per "imageLinkWrap" einen Link um das Foto gelegt. Nun muss ich wegen des Overlays einen etwas anderen HTML Code generieren:

  <div class="picmenuphoto" >
    <a href="#" >
      <span class="pic"><img src="#" /></span>
      <span class="overlay"></span>
    </a>
  </div>

Hierbei habe ich folgendes Problem: Wie bekomme ich die Spans um das Bild gelegt, so daß sie von dem Link eingeschlossen werden? Zu guter Letzt noch der Code, wie ich den Link derzeit erzeuge:

          imageLinkWrap {
            enable = 1
            typolink {
              target =
              parameter.field = uid
              ATagParams = class="screenshotlink"
            }
          }
Julian.​Hofmann ·

Hallo.

Du kannst die volle Bandbreite von TypoScript ausnutzen, indem Du Dir selbst ein cObject für die Menueinträge zusammenbaust. TYPO3 hat in seinem "Standard-Eintrag" versucht möglichst vieles abbilden zu können, für ganz spezielle Anforderungen reicht aber nicht.

Lina hat (schon vor längerer Zeit, aber noch immer aktuell) einen Blogbeitrag geschrieben:
Ausführliches TMENU in TYPO3
http://typo3-blog.net/tutorials/news/ausfuehrliches-tmenu.html

Viele Grüße
Julian

akonze ·

Danke für den Hinweis. Ich habe mittlerweile eine andere Lösung für mein Problem gefunden. Es gibt beim "typolink" den Parameter "ATagBeforeWrap" mit dem der Link auch um einen mitgegebenen Wrap gelegt wird. Damit funktioniert es auch und man muss nicht per COA verschiedene Objekte hintereinander setzen. Mein Code sieht nun so aus:

typolink {
  target =
  wrap = <span class="mpic">|</span><span class="moverlay"></span>
  ATagBeforeWrap = 1
  parameter.field = uid
  ATagParams = class="screenshotlink"
}