Hallo liebe Gemeinde,
ich stehe vor folgendem Problem:
Ich möchte gerne ein horizontales Menu (1. Ebene) mit einem Submenu. In der Mitte der 1. Ebene ist aber ein Navipunkt, der eine andere Schriftfarbe und eine andere Schrift bekommen soll, damit der Navipunkt besonders hervorgehoben ist.
Habe das bisher nur durch 3 Listen realisieren können, wo die überflüssigen Navigationspunkte per CSS ausgeblendet wurden. Es funktioniert, aber es ist seeehr unschön #paralyzed# Habt ihr vielleicht eine bessere Idee? Würde mich freuen.
LG Steffi
2. Frage, wenn ich grad mal hier schreibe.... Mir fehlt auch noch der TSCode, damit ich nur beim Mouse/Rollover der 2.Ebene (Subnavi) den Oberpunkt aktiv lasse (wie beim bloßen Rollover der 1. Ebene). Der soll natürlich nicht permanent gehighlightet bleiben, nur beim Mouseover des Submenüs. Habe mehrere Varianten ausprobiert, aber geht irgendwie nicht. Mein Submenu wird auch fast ausschließlich vom CSS angesprochen. Ist das vielleicht das Problem?
Danke schonmal im vorraus.
Mein TS-Code:
temp.navigation = HMENU
temp.navigation {
1 = GMENU
1 {
expAll = 1
wrap = <ul id="navi">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
backColor = #ffffff
XY = [10.w]+35,39
wrapItemAndSub = <li class="start" onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li class="end" onmouseover="show(this)" onmouseout="hide(this)">|</li>
ATagParams = class="praxis" || class="leistungen" || class="op" || class="partner" || class="kontakt"
10 = TEXT
10.antiAlias = 1
10.text.field = title
10.fontColor = #000000
10.fontFile = fileadmin/fonts/helvn_light.ttf
10.fontSize = 13
10.niceText = 1
10.offset = 17, 25
10.text.case = upper
}
RO < .NO
RO = 1
RO {
backColor = #9f0102
ATagParams = class="test"
10.fontColor = #ffffff
}
}
2 = TMENU
2 {
noBlur = 1
expAll = 1
wrap = <ul class="sub1">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li class="start" onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li class="end" onmouseover="show(this)" onmouseout="hide(this)">|</li>
}
}
}
lib.container < temp.navigation
temp.navigation2 = HMENU
temp.navigation2 {
1 = GMENU
1 {
expAll = 1
wrap = <ul id="navi2">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
backColor = #ffffff
XY = [10.w]+35,39
wrapItemAndSub = <li class="start" onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li class="end" onmouseover="show(this)" onmouseout="hide(this)">|</li>
ATagParams = class="praxis2" || class="leistungen2" || class="op2" || class="partner2" || class="kontakt2"
10 = TEXT
10.antiAlias = 1
10.text.field = title
10.fontColor = #000000
10.fontFile = fileadmin/fonts/helvn_light.ttf
10.fontSize = 13
10.niceText = 1
10.offset = 17, 25
10.text.case = upper
}
RO < .NO
RO = 1
RO {
backColor = #9f0102
ATagParams = class="test"
10.fontColor = #ffffff
}
}
2 = TMENU
2 {
noBlur = 1
expAll = 1
wrap = <ul class="sub1">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li class="start" onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li class="end" onmouseover="show(this)" onmouseout="hide(this)">|</li>
}
}
}
lib.container < temp.navigation2
temp.navigation3 = HMENU
temp.navigation3 {
1 = GMENU
1 {
expAll = 1
wrap = <ul id="navi3">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
backColor = #ffffff
XY = [10.w]+35,39
wrapItemAndSub = <li class="start" onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li class="end" onmouseover="show(this)" onmouseout="hide(this)">|</li>
ATagParams = class="praxis3" || class="leistungen3" || class="op3" || class="partner3" || class="kontakt3"
10 = TEXT
10.antiAlias = 1
10.text.field = title
10.fontColor = #000000
10.fontFile = fileadmin/fonts/helvn_light.ttf
10.fontSize = 13
10.niceText = 1
10.offset = 17, 25
10.text.case = upper
}
RO < .NO
RO = 1
RO {
backColor = #9f0102
ATagParams = class="test"
10.fontColor = #ffffff
}
}
2 = TMENU
2 {
noBlur = 1
expAll = 1
wrap = <ul class="sub1">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li class="start" onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li onmouseover="show(this)" onmouseout="hide(this)">|</li> |*| <li class="end" onmouseover="show(this)" onmouseout="hide(this)">|</li>
}
}
}
lib.container < temp.navigation3
Mein CSS (nur die Ausblendung):
ul#navi .op,
ul#navi .partner,
ul#navi .kontakt,
ul#navi2 .praxis2,
ul#navi2 .leistungen2,
ul#navi2 .partner2,
ul#navi2 .kontakt2,
ul#navi3 .praxis3,
ul#navi3 .leistungen3,
ul#navi3 .op3
{
display:none;
}
Keiner eine Idee oder vielleicht nur so lösbar, wie ich das jetzt gemacht habe?
Hatte ja noch ne 2. Frage, vielleicht kann die mir einer beantworten:
2. Frage, wenn ich grad mal hier schreibe.... Mir fehlt auch noch der TSCode, damit ich nur beim Mouse/Rollover der 2.Ebene (Subnavi) den Oberpunkt aktiv lasse (wie beim bloßen Rollover der 1. Ebene). Der soll natürlich nicht permanent gehighlightet bleiben, nur beim Mouseover des Submenüs. Habe mehrere Varianten ausprobiert, aber geht irgendwie nicht. Mein Submenu wird auch fast ausschließlich vom CSS angesprochen. Ist das vielleicht das Problem?
Schnell geschossen:
Guck mal in die Menü-Zustände. Sowas wie CUR und ACT oder CURIFSUB und ACTIFSUB könnte dir vielleicht weiterhelfen.
Entweder oben in den HowTos oder in der Referenz.
Grüße
Liz
Oder hab ich da ein Logik-Problem: Willst du per hovern eines Unterpunktes eigentlich den Hauptpunkt mit hover ausstatten?
Das ist allerdings :o
also so solls aussehen:
Bild: img715.imageshack.us/…/opnavi.jpg
Das graue Mouseover krieg ich ja hin, aber nicht das es da oben gleichzeitig rot ist.
Die verschiedenen Zustände habe ich probiert, aber irgendwie krieg ichs nicht hin :-(
Für dein 1. Problem solltest du dir mal Optionsplit anschauen!
Für dein anderes Problem stehe ich gerade auch ein bisschen auf dem Schlauch.
Mit ROIFSUB lässt sich das glaub ich nicht lösen. Aber ein Versuch wäre es wert.
ab Zeile 32 habe ich jetzt folgendes eingebaut, funktioniert nur leider nicht. Muss ich noch was zusätzlich reinmachen?
(ROIFSUB ist als Menüzustand glaub ich gar nicht möglich)
Gibts noch Ideen?
Würde mich freuen. Danke. LG Steffi
ROIFSUB < .NO
ROIFSUB = 1
ROIFSUB {
backColor = #9f0102
ATagParams = class="test"
10.fontColor = #ffffff
}
IFSUBRO < .NO
IFSUBRO = 1
IFSUBRO {
backColor = #9f0102
ATagParams = class="test"
10.fontColor = #ffffff
}
#angry#
d.walter schrieb
Für dein 1. Problem solltest du dir mal Optionsplit anschauen!
Japp Top. Habs hingekriegt. Danke für den Tipp.
Hab jetzt Zeile 17/18 ersetzt zu:
10.fontColor = #000000 || #000000 || #9f0102 || #000000 || #000000
10.fontFile = fileadmin/fonts/helvn_light.ttf || fileadmin/fonts/helvn_light.ttf || fileadmin/fonts/helvn_bold.ttf || fileadmin/fonts/helvn_light.ttf || fileadmin/fonts/helvn_light.ttf
und siehe da, die anderen Navigationen kann ich jetzt löschen und hab nur noch eine 😃
Übrigens finde ich, dass Informationen zu optionsplit wirklich recht wenig sind. Habe aber ein guten Link dazu gefunden:
http://castironcoding.com/resources/typo3-admins-corner/typo3-admin-corner-article/article/understanding-optionsplit/index.html
Jetzt fehlt nur noch das Rollover-Problem. Dann wäre ich glücklich :-)
LG Steffi
Zu dem Rollover-Problem noch mal. Ich habe verstanden, dass Du einen hover-Effekt haben willst.
1. Auf dein Submenupunkt (kein Problem)
2. Gleichzeitig soll das Hovern des Submenus einen Hovereffekt im übergeordneten Hauptmenupunkt zeigen.
Falls das stimmt: Soweit ich weiss, ist das mit CSS-Mitteln nicht möglich.
Ein Ansatz wäre Javascript - wäre das generell eine Möglichkeit in deinem Projekt?
Grüße
Liz
lizbet schrieb
2. Gleichzeitig soll das Hovern des Submenus einen Hovereffekt im übergeordneten Hauptmenupunkt zeigen.
Falls das stimmt: Soweit ich weiss, ist das mit CSS-Mitteln nicht möglich.
Ein Ansatz wäre Javascript - wäre das generell eine Möglichkeit in deinem Projekt?
Grüße
Liz
Joa das 2. wäre es.
Javascript im GMENU?? Sind doch alles Grafiken? Das geht doch gar nicht oder? #paralyzed#
Übrigens habe ich mir noch einmal die Menüzustände angeguckt.
Rein vom logischen, müsste einer dieser beiden Zustände das können, was ich möchte:
ACTIFSUBRO CURIFSUBRO
--> Also im Prinzip: Wenn man über die Submenü-Punkte hovert, ist der jeweilige Oberpunkt aktiv. Oder nicht? Wenn nicht, was machen die Menüzustände dann?
LG Steffi
P.S. Hab die auch bei mir drin gehabt, aber keiner macht was #angry#
hi steffi,
was du willst ist einen rollover oder hover-effekt, der von unten nach oben funktioniert. ACTIFSUBRO und CURIFSUBRO funktionieren aber von oben nach unten.
in worten würde das etwa heissen:
TS:
CURIFSUBRO =
- ich bin ein menüpunkt und
- ich bin die angezeigte (CURrent) seite und
- ich habe kinder (IFSUB) und
- ICH(!) werde von der maus überfahren (RO)
> higlighte mich
ACTIFSUBRO =
- ich bin ein menüpunkt und
- ich bin ahne (in der rootline ACT) der angezeigten seite und
- ich habe kinder (IFSUB) und
- ICH(!) werde von der maus überfahren (RO)
> higlighte mich
noch mal ohne RO-effekt:
ACTIFSUB =
- ich bin ein menüpunkt und
- ich bin ahne (in der rootline ACT) der angezeigten seite
- ich habe kinder (IFSUB)
> higlighte mich
und hier dein wunsch:
STEFFISWUNSCHRO =
- ich bin ein menübpunkt und
- ich bin KIND von xyz und
- ICH(!) werde von der maus überfahren (RO)
> higlighte meine mama (xyz)
Javascript deswegen, weil man damit solche Effekte hinpfriemeln kann.
ich will aber nicht ausschließen, dass es auch lösungen mit TS gibt - hat dazu jemand ne idee?
gruesse
Liz
Nachtrag:
habe mir grade noch mal grafik des menus angesehen. Wenn die AKTIVEN seiten rot hinterlegt sind und sich das beim rollover nicht ändert, dann muss das gehen.
du musst eigentlich nur ACTs und CURs entsprechend definieren.
ab zeile 25:
RO < .NO
RO = 1
RO {
backColor = #9f0102
ATagParams = class="test"
10.fontColor = #ffffff
}
versuch mal anschließend:
ACT < .RO
ACT = 1
ACTIFSUBRO < .RO
ACTIFSUBRO = 1
CUR < .RO
CUR = 1
CURIFSUBRO < .RO
CURIFSUBRO = 1
(ich hab mich von dem sondermenüpunkt "OPERATIONSBEREICH" irritieren lassen...)
gruesse
Liz
lizbet schrieb
ab zeile 25:
RO < .NO
RO = 1
RO {
backColor = #9f0102
ATagParams = class="test"
10.fontColor = #ffffff
}
versuch mal anschließend:
ACT < .RO
ACT = 1
ACTIFSUBRO < .RO
ACTIFSUBRO = 1
CUR < .RO
CUR = 1
CURIFSUBRO < .RO
CURIFSUBRO = 1
hey hab ich grad mal auprobiert.
Ergebnis ist das hier (bin auf einem Unterpunkt von Leistungen):
Bild: img534.imageshack.us/…/navin.jpg
lizbet schrieb
und hier dein wunsch:
STEFFISWUNSCHRO =
- ich bin ein menübpunkt und
- ich bin KIND von xyz und
- ICH(!) werde von der maus überfahren (RO)
> higlighte meine mama (xyz)
Javascript deswegen, weil man damit solche Effekte hinpfriemeln kann.
ich will aber nicht ausschließen, dass es auch lösungen mit TS gibt - hat dazu jemand ne idee?
gruesse
Liz
Also ich glaube auch, dass man sich da eine individuelle Lösung basteln muss, obwohl ich ehrlich mal sagen muss, dass ich mein Navigationswunsch gar nicht mal als untypisch ansehen würde. Also solche Arten von Navigationen gibt es doch schon oft, oder?
just2b hat aufjedenfall mal gepostet, wo das GMENU gebildet wird:
typo3/sysext/cms/tslib/media/scripts/gmenu_layers.php
So erstmal schön zu wissen. Naja ich bin kein JS/PHP-Experte und kann die Änderungen nur schwer machen. Müsste dazu einen Programmierer fragen. Leider. #angry#
Hat vielleicht jemand schon so ein Snippet oder weiß jemand, wo man das genau ändern kann?
LG Steffi
Also ich glaube auch, dass man sich da eine individuelle Lösung basteln muss, obwohl ich ehrlich mal sagen muss, dass ich mein Navigationswunsch gar nicht mal als untypisch ansehen würde. Also solche Arten von Navigationen gibt es doch schon oft, oder?
ja, ich kenne solche design-entwürfe auch. worüber man dabei streiten kann ist - wie immer - das dropdown. (häufige kritik: wenn ich den obersten menüpunkt aktiv habe aber auf einer subseite bin, weiß ich als besucher nicht, wo ich bin. mal angenommen ich komm vom gockel oder einem anderen deeplink auf die subseite. freilich kann man dann mit pfad-menüs arbeiten aber das ist m.e. subobtimal). ich persönlich mag die dropdowns einfach nicht. aber des kunden wunsch ist selbstverständlich himmmmmmmmelllll....
würd mich interessieren, ob du da ne lösung hinbauen kannst.
grüße
liz
(mein letzter post war wohl unsinn, sprich ich war "die verwirrte" #paralyzed# . du wolltest es ja wie im post davor genannt.)
hi steffi,
wenn du die background-farben mit css steuern würdest, dann könntest du auf das LI des main menu einen hovereffekt legen.
das sollte mit deiner idee eigentlich hinhauen, weil deine 2. ebene ja im LI der 1. Ebene steckt.
da brauchst du allerdings ein bisschen hack für die alten ie die können nicht auf LI hovern.
css-dropdowns sind schon aufwendiger, wenn man das crossbrowser-sicher will. und bei dir könnte es gar eine mixtüüür gäben....
den suckerfish kennst du wahrscheinlich:
http://www.alistapart.com/articles/dropdowns/
und seinen sohn:
http://www.htmldog.com/articles/suckerfish/dropdowns/
grüße
liz