Zum Inhalt springen

GMENU mit Bildern dazwischen und Layern

Erstellt am 11. März 2008 · 8 Antworten · letzte Antwort am 23. März 2008

Tags: Bilder, HTML & CSS, Frage

ajanning ·

Hallo zusammen,

ich habe das Forum jetzt schon 3 Stunden durchsucht und viele Varianten ausprobiert, aber irgendwie will das nicht so wie ich will.

Ich bin dabei, ein an sich sauber verschachteltes GMENU (1. Ebene) mit einem TMENU (2. Ebene) zu kombinieren, das in der "Standard"-Schachtelung ausgegeben wird:

<div id="navigation">
<ul>
  <li><a>Haupt mit Unterpunkte / GMENU</a>
    <ul>
      <li><a>Unter / TMENU</a></li>
      <li><a>Unter / TMENU</a></li>
    </ul>
  </li>
  <li><a>Haupt / GMENU</a></li>
  <li><a>Haupt / GMENU</a></li>
</ul>
</div>

Die 2. Ebene wird per CSS (JS für IE) eingeblendet

"#navigation a" muss aber im StyleSheet einen display:block haben, damit es im IE einwandfrei funktioniert.

Und jetzt kommt das Problem: zwischen den Haupt-Navi-Punkten der 1. Ebene muss jeweils noch eine "Trenner"-Grafik fürs Design rein, die sich nicht mit dem display:block verträgt... aber natürlich nur dazwischen, nicht danach! Und daher kann man auch den fertigen GMENU_FOLDOUT nicht benutzen.

Anbei mein TS, hier sind jetzt schon alle meine Ansätze drin:

lib.myNavigation = HMENU
lib.myNavigation {
  entryLevel = 1
  1 = GMENU
  1 {
    noBlur = 1
    expAll = 1

    wrap = <ul>|</ul>

    NO = 1
    NO.wrap = |*| <li>|<img src="fileadmin/blume.gif" width="17" height="34" alt="" /></li>|*| <li>|</li> 

    NO {
      XY = [10.w]+10,34
      
      10 = TEXT
      10.text.field = title
      10.offset = 5,28
      10.fontFile = fileadmin/templates/fonts/SCHRIFTART.otf
      10.fontSize = 15
      10.fontColor = #123456

      20 = IMAGE
      20.file = fileadmin/blume.gif
      20.offset = 10,10

    }
    IFSUB = 1
    IFSUB < .NO
    IFSUB.wrap = |*| <li class="menuparent">|<img src="fileadmin/blume.gif" width="17" height="34" alt="" /> |*| <li class="menuparent">| 
  }

  2 = TMENU
  2 {
    noBlur = 1
    expAll = 1
    wrap = <ul>|</ul></li>

    NO = 1
    NO {
      wrap = <li>|</li>
    }
  }
}

Die Verschiedenen Variationen für obige optionSplit habe ich auch schon ausprobiert, aber es darf keine separate Grafik neben dem Link im <li></li> stehen, entweder bockt IE oder aber Firefox (bei ausprobiertem unsauberem Code mit Grafik zwischen </li><li>!).

Wie Ihr seht, habe ich auch schon versucht, die Grafik dadrüberzulegen, was aber nicht zu funktionieren scheint. [Reell würde die natürlich weiter nach aussen gelegt und die Grösse der gesamten Grafik geändert werden]

Auf dem Server habe ich zur Verfügung:
ImageMagick 4.29, 5.54, 6.26, alle mit LZW und auch GM

Hiervon habe ich bereits alle Varianten ausprobiert - mit obigem TS bekomme ich aber _immer_ nur eine weisse (leere) Grafik über den gerenderten Text gelegt.

Funktioniert IM etwa nicht? alle Test im Install-Tool sind einwandfrei.

Ich hoffe, Ihr könnt mir helfen?

Schöne Grüsse,
Achim

fuss ·

Olla!

Ich würde die Grafik (da es sich anscheinend immer um die selbe handelt) einfach per CSS in das <a> packen, und dem nen padding mit geben:

/* 1st level */
#navigation ul li a {
 background: transparent ('url_to_img') no-repeat left bottom;
 padding-bottom: 32px; /* wenn blume 32px hoch ist */
}

/* second level */
#navigation ul li ul li a {
 background-image: none;
}

Ungetestet, sollte aber funktionieren.

gruss, fuss

Nachtrag:
Um Dein ul/li Menü auch ordentlich/valide verschachtelt zu bekommen, solltest Du statt dem wrap = <li>|</li> ein wrapItemAndSub = <li>|</li>

Nachtrag 2:
Jetzt verstehe ich auch, was Du mit "dazwischen und nicht dahinter" meinst.
Ok, dann gib dem li mit optionsplit ne class mit, und im css heisst es dann halt

#navigation ul li.class a {
 siehe oben
}
ajanning ·

Hallo Fuss,

Vielen Dank für Deine Antwort und auch die Nachträge, das ist es aber leider nicht.

Den CSS-Hintergrund wollte ich auch gerne setzen, hapert aber an "nur dazwischen".
Fürs saubere Aufklappen benötige ich den "menuparent", und zwei Klassen in einem <li> funktionieren nicht immer einwandfrei.

[Alternativ wäre hier möglich, jeweils den Hintergrund "links davon" zu setzen und den linkesten durch eine übergelegte Grafik wieder verschwinden zu lassen ... mit sowas will ich aber nach Möglichkeit gar nicht anfangen, ausserdem wäre dann der Aufklapp-Ursprung nicht sauber an der richtigen Position.]

wrapItemAndSub anstelle von wrap ist eine gute Anregung, hier aber zuviel des Guten, da dadrunter keine Ebenen mehr angezeigt werden sollen!

Momentane "Zwischenlösung" (hilft aber nicht gegen das Problem an sich):
Da die Hauptnavi-Punkte immer gleich bleiben, wird im CSS eine lange Hintergrund-Grafik (mit den Blumen an passender Steller) hinter die gesamte Navi gelegt ... grrr

Letzte Möglichkeit wäre allerhöchstens, den Link in sich aufzuwrappen und da die Blume mit hineinzuschreiben à la

<div id="navigation">
  <ul>
    <li class="menuparent"><a>GMENU-GIF BLUME.GIF</a>
      <ul>
        <li><a>Unter / TMENU</a></li>
        <li><a>Unter / TMENU</a></li>
      </ul>
    </li>
    <li><a>GMENU-GIF BLUME.GIF</a></li>
    <li><a>GMENU-GIF BLUME.GIF</a></li>
    <li><a>GMENU-GIF</a></li>
  </ul>
</div>

Könnte eventuell funktionieren, aber geht optionSplit an dieser Stelle auch noch, weis das jemand?

Schöne Grüsse,
Achim

fuss ·

Aha, nebeneinander. Egal, macht nix 😉
Mein Beispiel bezog sich auf ein vertikales Menü, sollte aber auch so in Deinem Falle gehen:

Per Optionsplit (für alle Elemente, ausser dem letzten) schreibst Du Dir direkt in das li:

style="background: transparent ('blume') right center; padding-right: grösseblume;"

das sollte funktionieren.

gruss, fuss

ajanning ·

Jaaaa, ja, Danke !

Und die Style-Angabe

background: url(images/navigation-blume.gif) no-repeat 100% 50%;

reicht auch ohne das Padding aus!

Vielen Dank, Fuss!

Schöne Grüsse,
Achim

npre ·

hallo,

habe auch so ein menü aufgesetzt und funktioniert soweit wunderbar. nur möchte ich noch, dass das aktive menü angezeigt wird, bzw. dass beim mouse-over über die grafiklinks sich die farbe ändert.

wenn ich nun versuche, folgendes irgendwo einzubauen, dann wird entweder gar kein submenü mehr angezeigt, oder die ul/li-anordnung stimmt nicht mehr:

ACT <.NO
ACT.10.fontColor = #FF9A00

RO <.NO
RO.10.fontColor = #FF9A00

ACTRO <.RO

des weiteren möchte ich auch noch im submenü dem aktiven menüpunkt die class="active" zuweisen.

vielen dank schon mal für eure hilfe und tipps!

martin

npre ·

habs nun hingekriegt. falls es jemand brauchen sollte, hier das ergebnis:

## Menu [Begin]
lib.mainMenu  = HMENU
lib.mainMenu {
  entryLevel = 0
  1 = GMENU
  1 {
    noBlur = 1
    expAll = 1

    wrap = <ul id="nav">|</ul>

    NO = 1
    NO.wrap = |*| <li>|</li>|*| <li>|</li>

    NO {
    	transparentBackground = 1
        ATagTitle.field = title
        XY=[10.w]+10,24

        5 = IMAGE
        5.file = fileadmin/templates/site/images/menuBG.gif   

        10=TEXT
        10 {
        text.field=title
        offset=0,10
        fontColor=#FFFFCC
        fontFile=fileadmin/templates/site/LITHOGRL.TTF
        fontSize=13

        } 
      }
             
    ACT = 1
    ACT.wrap = |*| <li>| |*| <li>|

    ACT {
    	transparentBackground = 1
        ATagTitle.field = title
        XY=[10.w]+10,24

        5 = IMAGE
        5.file = fileadmin/templates/site/images/menuBG.gif   

        10=TEXT
        10 {
        text.field=title
        offset=0,10
        fontColor=#FF9A00
        fontFile=fileadmin/templates/site/LITHOGRL.TTF
        fontSize=13

        } 
      } 
        
    ACTRO <.RO 
       
    IFSUB = 1
    IFSUB < .NO
    IFSUB.wrap = |*| <li>| |*| <li>|
    
    RO = 1
    RO.wrap = |*| <li>|</li>|*| <li>|</li>

    RO {
    	transparentBackground = 1
        ATagTitle.field = title
        XY=[10.w]+10,24

        5 = IMAGE
        5.file = fileadmin/templates/site/images/menuBG.gif   

        10=TEXT
        10 {
        text.field=title
        offset=0,10
        fontColor=#FF9A00
        fontFile=fileadmin/templates/site/LITHOGRL.TTF
        fontSize=13

        } 
      } 
    
    IFSUBRO < .RO
    IFSUBRO.6 = IMAGE
   }

  2 = TMENU
  2 {
    noBlur = 1
    expAll = 1
    wrap = <ul><li>|</ul></li>

    NO = 1
    NO {
    wrap = <li>|</li>
    }
    
    ACT = 1
	ACT {
	Wrap = <li>|</li>
	ATagParams = class="active"
	}
  }                              
}
## Menu [End]