Hallo,
ich habe ein Problem mit einem bestimmten Menü. Ich habe es über css (Suckerfish) umgesetzt und über TypoScript eingebunden. Zumindest habe ich die Umsetzung versucht. Leider gibts ein paar Probleme wo ich absolut nicht weiterkommen, oder den Wald vor lauter Bäumen nicht mehr sehe.
Das Menü könnt ihr euch unter
http://www.kompost.de/index.php?id=11&L=0
ansehen. Im Firefox läuft gar nicht so wies soll. Das ist auch eins der Probleme. Ich weiss nicht warums hier ganz anders aussieht als im IE.
Im IE läuft vom Prinzip her fast richtig. Außer, dass der transparente Balken, der sich nach oben über das Hintergrundbild öffnet, bei dem Momentan aktiven Menüpunkt geöffnet bleiben soll. Das krieg ich einfach nicht hin. Vielleicht hat da ja jemand eine Idee, ich hoff ja es ist nur eine Kleinigkeit auf die ich nicht komme.
Danke
bert
Hier noch das TS
temp.nav_main = HMENU
#temp.nav_main.entryLevel = 0
temp.nav_main.1 = TMENU
temp.nav_main.1 {
expAll = 0
wrap = <ul id="nav"> | </ul>
NO.wrapItemAndSub = <li> | </li>||*||*|<li> | </li> |
NO.stdWrap.htmlSpecialChars = 1
NO.ATagParams=class="roll"
NO.allWrap = | <ul><li> </li></ul>
ACT < .NO
ACT = 1
# ACT.wrapItemAndSub = <li> | </li>||*||*|<li> | </li> |
# ACT.stdWrap.htmlSpecialChars = 1
ACT.ATagParams=class="nav_active"
ACT.allWrap = | <ul><li>iii</li></ul>
}
und das JS für den hover Effekt im IE:
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navroot.childnodes.length; i="" node="navRoot.childNodes[i];" if="" nodenodename="LI" nodeonmouseover="function()" thisclassname="this.className.replace("" nodeonmouseout="function()" over="" windowonload="startList;
" und="" der="" css="" teil:="" html="" menu="" top="" index="" contentwrapper="" position:="" relative="" top:="" 0px="" width:="" 724px="" height:="" 130px="" background-image:="" urlfileadmintemplatesimagesbildleistenbildleiste_2gif="" mainnaviwrapper="" absolute="" 100px="" left:="" text-align:="" center="" mainnavi="" margin:="" aroll="" padding-top:="" padding-left:="" padding-right:="" 2px="" color:="" 009c3a="" font-weight:="" bold="" text-decoration:="" none="" 103px="" aroll:hover="" background-color:="" ffffff="" 20px="" aroll:active="" anav_active="" anav_active:hover="" anav_active:active="" 000000="" nav="" ul="" font-family:="" arial="" helvetica="" sans-serif="" font-size:="" 10px="" 110px="" list-style:="" filter:="" alphaopacity="80);" -moz-opacity:="" 08="" li="" float:="" left="" 93px="" -220px="" display:=""> ul {
top: auto;
left: auto;
}
.nav li:HOVER ul, li.over ul {
display: block;
}
Hallo,
nun du benötigst ein valides Listenmenü und nicht irgendein zusammengemurks von ul/li-Tags, dein allWrap wird wohl der Verursacher sein!
Schau mal dass du den notwendigen Quellcode bekommst, alles andere ist dann ja nur noch CSS und nicht TYPO3
lg georg
Hallo Georg,
danke für die schnelle Antwort!! Ich will in echt kein Menü in dem nach oben öffnenden Balken angezeigt haben, deswegen der allWrap der ein Menü vorgaukeln soll, aber kein echtes ist, also keins darstellt (aber damit sich der Balken nach oben öffnet). Das ganze soll ein grafischer Effekt sein (hat sich auch ein Grafiker ausgedacht). Ist das gewählte deiner Meinung nach der falsche Ansatz dafür? Bzw. ist das deiner Meinung nach überhaupt lösbar? Ich schaue gerade nochmal in Deine Menübeispiele rein.
grüße
bert
Hallo Bert,
ich kann nicht beurteilen obs der richtige Weg ist, denn ich kenne dein Vorhaben nicht, also nicht den Quellcode den du erreichen willst also nochmals: Vesuch erstmals nur die geforderte Struktur zu bekommen, alles andere ist dann ja nur noch CSS/Feinheit
georg
Hallo Georg,
das Vorhaben ist so wie unter dem Link und nur im IE angezeigt wird, nur mit dem Zusatz, dass bei dem angeklickten aktivem Menüpunkt, der transparente Balken über dem Hintergrundbild sich nicht schließen soll, sondern geöffnet bleiben soll, bis ein anderer angeklickt wird. Da und bei der Darstellung im Mozilla/Firefox hackt es. Da hab ich momentan keine Idee worans liegt oder ich hab mich in was verrannt. Aber im IE läuft es ja vom Prinzip her so wie es soll(also ist die Struktur nicht ganz falsch), nur das der Aktive Menüpunkt, wie beim Mouseover angezeigt werden soll bzw. so bleiben soll. Kann ich das im CSS bei dieser Menüvariante definieren? Bei all meinen Test war nicht der gewünschte Effekt zu erreichen. Der Balken klappt immer wieder zu.
Deshalb hoffe das hier vielleicht jemand eine Idee oder einen Tipp hat.
Ich schau mir jetzt nochmal die Struktur und den allWrap an (manchmal sieht man nix mehr)
viele grüße
bert
nun geht das vorhaben vom designer im firefox? dann schau dir den unterschied im quellcode an
georg
hallo georg,
nein geht nicht im Firefox. Da klappts am wenigsten. Bis auf den genannten Punkt
dass bei dem angeklickten aktivem Menüpunkt, der transparente Balken über dem Hintergrundbild sich nicht schließen soll, sondern geöffnet bleiben soll, bis ein anderer angeklickt wird.
klappts wenn überhaupt nur im IE.
Ich komme da nicht weiter und finde im Quelltext keine Unterschiede.
Das kann einen zur Verzweifelung bringen....
Grüße
bert
ja dann liegts auch nicht an TYPO3!
erstell dir ein html-template wo das lokal in beiden browsern funktioniert und dann erst gehts um die Portierung ins TYPO3
georg
Hallo Georg,
da bin ich mir nicht wirklich sicher. So wie dus vorgeschlagen hast war auch ursprünglich die Vorgehensweise. Das ganze wurde vorher lokal getestet und lief rein im html/css bis auf die beschriebene Funktion mit dem aktiv halten des transparenten Balkens im IE und Moz/Firefox. Beim portieren in Typo3 blieb diese Problem im IE so bestehen und im Mozilla/Firefox kam hinzu, dass er die CSS Angaben überhaupt nicht so annehmen will. Ich kann natürlich nochmal bei null anfagen, aber ich find einfach nicht den Hacken warum im Mozilla hackt und mit welchen Trick oder Befehl ich den Balken offen halten kann.
Hat da jemand eine Idee, ich bin dankbar für jeden Tipp!
Viele Grüße
bert
Hallo,
hat irgendjemand eine Ahnung oder Idee, ob man das überhaupt im hinbekommen kann? Oder welcher CSS Befehl verhindert das Schliessen??
hier nochmal das CSS (war im ersten Post nicht richtig eingebunden worden:
/* Menu TOP */
#index #contentWrapper {
position: relative;
top: 0px;
width: 724px;
height: 130px;
background-image: url(/fileadmin/templates/images/bildleisten/bildleiste_2.gif);
}
#index #mainnaviWrapper {
position: absolute;
top: 100px;
left: 0px;
width: 724px;
}
* html #index #mainnaviWrapper {
position: absolute;
top: 0px;
left: 0px;
width: 724px;
text-align: center;
}
#index #mainnavi {
position: relative;
left: 0px;
margin: 0px;
}
A.roll {
padding-top: 0px;
padding-left: 0px;
padding-right: 2px;
color: #009c3a;
font-weight: bold;
text-align: center;
text-decoration: none;
}
* html A.roll {
padding-top: 2px;
color: #009c3a;
font-weight: bold;
text-align: center;
text-decoration: none;
width: 103px;
}
A.roll:HOVER {
color: #009c3a;
font-weight: bold;
text-align: center;
background-color: #FFFFFF;
padding-top: 0px;
padding-left: 0px;
height: 20px;
}
* html A.roll:HOVER {
color: #009c3a;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #FFFFFF;
padding-top: 2px;
height: 20px;
}
A.roll:ACTIVE {
background-color: #FFFFFF;
}
A.nav_active {
color: #009c3a;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #FFFFFF;
height: 20px;
width: 103px;
padding-top: 2px;
padding-left: 0px;
}
A.nav_active:HOVER {
color: #009c3a;
text-align: center;
text-decoration: none;
background-color: #FFFFFF;
padding-top: 2px;
padding-left: 0px;
width: 103px;
height: 20px;
}
A.nav_active:ACTIVE {
color: #000000;
text-decoration: none;
background-Color: #000000;
width: 103px;
}
.nav ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
margin: 110px, 0px, 0px, 0px;
list-style: none;
top: 0px;
left: 0px;
height: 20px;
background-color: #FFFFFF;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}
.nav li {
position: relative;
float: left;
left: 0px;
top: 2px;
width: 93px;
padding-right: 0px;
padding-left: 0px;
list-style: none;
}
* html .nav li {
position: relative;
float: left;
left: 0px;
top: 0px;
width: 103px;
list-style: none;
}
.nav li ul {
position: absolute;
top: -220px;
left: 0px;
height: 110px;
display: none;
}
.nav li > ul {
top: auto;
left: auto;
}
.nav li:HOVER ul, li.over ul {
display: block;
}
Freue mich auf jede Antwort!
Danke
Bert
Also ich habe schon eine Idee, wie ich das umsetzen würde, kanns aber gerade nicht testen.
1. Das schließen kannst du per CSS nicht verhindern. Da musst du in TYPO mit ACT arbeiten und damit dem aktiven Punkt dauerhaft die CSS Klasse zuordnen die halt den aktivzustand anzeigt.
2. Zum grundsätzlichen Aufbau... Geh das Problem nicht auf die offentsichtliche Weise an (aufklappmenü nach oben) sondern mach ein normales Listenmenü mit einer Ebene, das ganz oben auf deiner Seite verläuft und bei dem du die Links per padding nach unten verschiebst. Dann musst du nur bei mouseover den jeweiligen Listenpunkt umstylen mit deinem transparenten Hintergrund...
3. kleiner Tipp am Rande, benutz statt backgroundcolor und den opacity-filtern ein PNG-24 mit der entsprechenden transparenz als Hintergrund. Das funktioniert in den meisten Browsern. Nur für den IE musst du dann den filter drinlassen, der ergibt dann aber auch den selben Effekt.
danke für die Tipps, also mit CSS kriegt mans nicht hin?? Ich dachte da gäbs noch einen Trick. Hmm
Im TypoScript dachte ich auch wäre ACT und dann die aktive Klasse zuordnen der richtige Weg. Habe ich aber irgendwie nicht hinbekommen, oder ich weise die falsche Klasse zu???
Hat jemand eine Ahnung ob an dem Typo Script was falsch ist??
bert
Ja du weißt ja auch nur die Klasse für aktive Links zu, du musst ja auch dein Fake-Submenü sichtbar machen. Ich habe mal deinen TS Code von oben kopiert und eine Änderung gemacht, ich denke, damit sollte es gehen...
temp.nav_main = HMENU
#temp.nav_main.entryLevel = 0
temp.nav_main.1 = TMENU
temp.nav_main.1 {
expAll = 0
wrap = <ul id="nav"> | </ul>
NO.wrapItemAndSub = <li> | </li>||*||*|<li> | </li> |
NO.stdWrap.htmlSpecialChars = 1
NO.ATagParams=class="roll"
NO.allWrap = | <ul><li> </li></ul>
ACT < .NO
ACT = 1
# ACT.wrapItemAndSub = <li> | </li>||*||*|<li> | </li> |
# ACT.stdWrap.htmlSpecialChars = 1
ACT.ATagParams=class="nav_active"
ACT.allWrap = | <ul style="display:block;"><li>iii</li></ul>
}
Hallo Kitsunet!
Mensch tausend Dank!!!! Es funktioniert!!
Ich bin begeistert, ich habs schon fast nicht mehr geglaubt.
Aber es klappt!
Vielen Dank für die Hilfe und viele Grüße
bert