Zum Inhalt springen

GMENU mit variablem "Mittelteil"

Erstellt am 15. September 2011 · 1 Antwort · letzte Antwort am 15. September 2011

Tags: Frage

brubaker ·

Hallo!

Ich würde gerne mittels GMENU und Gifbuilder ein Menü bauen, wobei die Menüelemente in einer Box sind mit schatten drumrum.
Die Grafik hat einen Teil links der Schrift, dann einen sich wiederholenden Teil mit der Schrift und einen fixen Abschluss.

Leider scheitere ich die Hintergrundgrafik des Mittelteiles so groß zu machen wie der Text lang ist. Auch einfaches rechter Endteil "drüberpappen" hat leider nicht funktionieret.
Hat wer ne Idee wie ich das lösen könnte?
Das nächste Problem sehe ich beim ausrichten nach rechts, das scheint laut GMENU_LAYERS auch nicht zu gegen 🙁
Würde das Menü auch gerne mit reinem HTML (Tables) lösen, aber leider hab ich da noch keinen Weg gefunden beim RO dass allWrap zu ändern...
Bin für jede Idee für mein "Problem" dankbar.

Mein bisheriges TS:

1.NO = 1
 1.NO {
   //// table brauchts für Positionierung mittels "relativeToTriggerItem/relativeToParentLayer"
   
   allWrap=<td>|</td>
   XY = [40.w]+30, 51
   #transparentBackground = 1
   backColor = #4386b0
   transparentColor = #4386b0
   //// Menütexte rendern
   40 = TEXT
   40.text.field = title
   40.fontFile = t3lib/fonts/vera.ttf
   40.fontSize = 17
   40.fontColor = white
   #40.niceText.after = 1
   40.align = left
   40.offset = 15, 23
  
 }

 //// Roll-Over definieren
 1.RO < .1.NO
 1.RO {
   # //// linke Einrahmung rendern
   5 = IMAGE
   5.file = fileadmin/templates/pics/menu/menutopleft.png
   5.offset = 0,0
   # //// mittlere Einrahmung rendern
   10 = IMAGE
   10.file = GIFBUILDER
   10.file {
     XY = [40.w],51     #funktioniert leider nicht 
     file = fileadmin/templates/pics/menu/menutopmiddle.png
     offset = 10,0
     tile = 3,0
   }  
   20 = IMAGE
   20.file = fileadmin/templates/pics/menu/menutopright.png
   20.offset = 20+[40.w],0
   
   40.fontColor = #3a80ac
 }

menu.gif

fuss ·

Olla!

Ich würde Dein Problem wie folgt umsetzen:

Schrift mit GIF-Builder auf transparentem Hintergrund rendern.

RO/ACT Zustand mit CSS machen:
Active bekommt eine zusätzliche class z.b. class="act" und RO mit :hover.

Wichtig ist, dass in dem a Tag um das img noch ein span Tag ist, denn das a Tag bekommt dann den (vorgefertigten) Hintergrund mit Schatten (Linker Teil) und das span denselben Hintergrund (rechter Teil).

Stichwort ist "sliding doors". Siehe z.B.:
www.alistapart.com/articles/slidingdoors/

gruss, fuss