Hallo zusammen,
ich habe eine Frage zu der Gestaltung eines Menus.
Und zwar habe ich vor, ein horizontales Menu aufzubauen. Dies ist nicht das Problem, jedoch soll dieses Menu den Effekt haben, dass jeder Menu-Punkt eine andere Hintergrundfarbe hat.
Als Beispiel hat das Thema1 hat beim Mouseover die Hintergrundfarbe Gelb, welcher auch beim Maincontent als Hintergrundfarbe dienen soll. Thema2 hingegen, hat beim Mouseover die Hintergrundfarbe Blau, welche dann wie im ersten auch Hintergrund des Contents ist.
Meine Frage ist nur wie programmiere ich das Menu so, dass ich eigene jedem Thema eine eigene Farbe zuweisen kann?
Wenn jemand Tipps für mich hat wäre ich dankbar.
Gruß
Hallo
ich verweise auf folgenden Thread:
#98256
>> hier ließ ich mir das "richtige wrappen" zum gleichen Thema erklären....
das CSS für das mehrfarbige horizontale Menü könnte so aussehen:
#menu_oben { margin: 2px; padding: 2px; background-color:#005B94; color: #FFF; height: 20px; font-size: 0.7em; position: relative; }
#menu_oben ul { padding:0; margin:0; list-style:none; position:absolute; left:0; top:0; z-index:10; width: 100%; }
#menu_oben ul li { float:left; padding:0; }
#menu_oben li a { display:block; float:left; color:#fff; text-decoration:none; padding:0 10px; margin-top:6px; }
#menu_oben li#li1 a b { background-color:#005B94; }
#menu_oben li#li2 a b { background-color:#49A5EE; }
#menu_oben li#li3 a b { background-color:#A5D0F0 }
#menu_oben li#li4 a b { background-color:#BFCDD8; }
#menu_oben li#li5 a b { background-color:#505050; }
#menu_oben li#li6 a b { background-color:#49B2F0; }
#menu_oben li#li7 a b { background-color:#FFFD07; }
#menu_oben li#li8 a b { background-color:#787878; }
#menu_oben li a.current { color:#ff0; }
#menu_oben li a:hover.current { color:#ff0; }
#menu_oben li a:hover b { display:block; width:100%; position:absolute; left:0; top:0; z-index:-1; min-height: 24px; }
#menu_oben li#li1 a:hover b { background-color:#005B94; }
#menu_oben li#li2 a:hover b { background-color:#49A5EE; }
#menu_oben li#li3 a:hover b { background-color: #A5D0F0; }
#menu_oben li#li4 a:hover b { background-color:#BFCDD8; }
#menu_oben li#li5 a:hover b { background-color: #505050; }
#menu_oben li#li6 a:hover b { background-color:#49B2F0; }
#menu_oben li#li7 a:hover b { background-color:#FFFD07; }
#menu_oben li#li8 a:hover b { background-color: #787878; }
#menu_oben li a:hover { color:#FF0; white-space:nowrap; text-decoration: underline; }
Hey,
vielen Dank für die Antwort, ja hört sich nach dem an was ich suche. Ich werde dies die Tage austesten, sofern die Zeit besteht.
Hast du dieses CSS auf einer produktiven Homepage angewendet? Wenn ja könntest du mir einen Link via PM schicken, damit ich mir mal anschaun kann wie das aussehen kann? Wäre nett.
Gruß
hallo,
danke für Rückmeldung. Ja, ich habe das im produktiven Einsatz aber im intranet hinter einer firewall... da kommt keiner rein. keider...
deswegen hatte ich dir auch dass CSS gesandt.
WICHTIG! das CSS ist von stu nichols ccplay, (diese Site kann ich nur empfehlen)
http://www.cssplay.co.uk/menus/total_background.html
bitte copyright und "Lizenz" beachten.... DANKE!
Hatte in meinem vorigen Post ganz vergessen darauf hinzuweisen.....
LG & ciao....
ich habe die Lösung gefunden wie man innrhalb eines <a> tags noch ein <b> Tag bekommt
#gibt man noch ATagBeforeWrap = 1 ins TypoScript ein, so wird linkWrap ebenfalls innerhalb des a Tags ausgegeben:
ATagBeforeWrap = 1
Quelle: http://jweiland.net/typo3/anleitung/typoscript/wrap-moeglichkeiten-und-hierarchie-in-menues.html
LG & ciao....