Habe bereits wie verrückt gegooglet und einiges ausprobiert, jedoch den gewünschten Effekt bisher nicht erreicht =[
Und zwar bin ich gerade dabei eine Webiste zu erstellen, welche schon so gut wie fertig ist.
Alles was mir noch fehlt ist ein FadeIn - Out Effekt für die ausklappbaren Einträge in meinem Menü.
Ich bin mir ziemlich sicher, dass JQuery die Antwort ist, habe es allerdings nicht geschafft dies umzusetzen.
Habe bisher kaum Erfahrung in Javascript.
Daher möchte ich euch bitten, mir eventuell Code und Erklärung zu posten um mein Ziel zu erreichen und zu verstehen.
Es wäre schon sehr dringend, da ich unter Zeitdruck stehe
Hey, danke für die schnelle Antwort!ich müsste nur noch wissen, wo ich diesen Code genau einbauen muss.Muss ich dafür die hoverfunktionen aus meinem css löschen?Und wenn ich das auch für fadeOut umsetze, wie geh ichs am besten an, dass es die einträge erst sinkender, wenn ich weder auf einem obereintrag noch untereintrag bin?Thx soweit und bitte noch etwas geduld, da ich bisher ausschließlich html und css benutzt habe
Du benötigst für den von T!P-TOP geschriebenen Code jQuery. So wie es scheint hast du derzeit schon das Menü mit CSS erstellt. Denke nicht dass du etwas entfernen musst. Und du musst den Code innerhalb von einem Script-Tag schreiben. Wichtig ist auch noch, dass der Code ausgeführt werden darf, sobald das Dokument zu Ende geladen wurde. Das Stichwort was du da googlen kannst ist: jquery $(document).ready . Hoffe das hilft
ich glaub, beim jQuery-code von T!P TOP fehlte die abschliessende runde Klammer.
also, wenn du auch noch willst, das das Untermenü bei mouseout wieder verschwindet, zB. im -Bereich:
<script type="text/javascript">
$(document).ready(function(){
$("#menu ul li").hover(function(){
$("#menu ul li ul").fadeIn(1000);
},function(){
$("#menu ul li ul").fadeOut(1000);
});
});
</script>
Vielen Dank =] Ihr habt mir sehr geholfen!!
Soweit funktioniert jetzt alles, allerdings bleibt noch 1 Problem bestehen!
Das Untermenü soll rechts von der der Kategorie stehen, wobei der erste Eintrag in der gleichen Zeile stehen soll wie die Kategorie selbst.
Wenn ich über css die Positionen richtig vorgebe:
#menu li { position: relative; }
#menu ul ul { position: absolute; top: 0; left: 100%; width: 100%; text-align:left; display: none;}
…funktioniert allerdings der Fade-Effekt nicht richtig =/ Das Untermenü wird dann ganz ohne Effekt sofort angezeigt.
Wenn ich im css folgendes definiere: (Mit —x— markierte Stellen sind enfernt)
---#menu li { position: relative; }--- #menu ul ul { position: absolute; ---top: 0;--- left: 51%; width: 49%; text-align:left; display: none;}
…funktioniert der Fade-Effekt perfekt, allerdings wird das Untermenü um eine Zeile tiefer eingeblendet, als es erwünscht ist =/
Für mich nicht ganz logisch, hoffe ihr wisst eine Lösung!!
Habe gerade bemerkt, dass es im Firefox perfekt funktioniert mit den oben genannten css Einträgen o_O
Nur der Internet Explorer (neueste Version) hat die von mir genannten Probleme…
Dabei möchte ich die Website natürlich kompatibel zu den meisten Browsern machen.
Ideen?? =S
_< Die Sache wird sogar noch abstrakter…
Ich habe diese Navigationsleiste in einem eigenen Frame. Bei FireFox funktioniert das jetzt auch alles wie es soll.
Beim IE funktioniert der Fade-Effekt MIT richtigen Positionen auch, WENN ich das menü außerhalb eines Frames öffne… ???
ich bin neu hier im Forum und bin auf den Post gestoßen da ich ein ähnliches Problem habe. Ich bin noch im Anfängerstadium und komme im Moment einfach nicht weiter…
Im Grunde genommen, habe ich eine Menubar, welche unterpunkte hat. Wenn ich nun mit der Maus über einen der Menupünkte fahre, möchte ich das untermenu aufgehen lassen und dort interagieren können und sobald ich dieses mit der Maus verlasse, soll es auch wieder zu gehen. Ich habe es mit hover - slidetoogle versucht und auch wie hier beschrieben mit fadeIn Out jedoch verschwindet das untermenu logischerweise sofort nachdem ich in die untermenustruktur gehe, da ich ja nicht mehr in dem oberen element bin.
Kann mir hier einer weiterhelfen? Braucht ihr den Code dazu?
Wenn man das mit CSS genau so gut hinbekommt, na klar
ich möchte es so hinbekommen wie z.b.: bei Golem.de: IT-News für Profis in der Menuleiste oben im Register „Mehr“ (wo dann eben so ein unterpunkt erscheint) aber wenn ich in die unterpunkte gehen, dann geht das „fenster“ bei mir wieder zu :-?
Vielleicht kannst du mir noch mal weiterhelfen. Ich habe nun ein Menu erstellt, welches das glecihe grüst hat wie das von dem Guide (etwas weiter oben im Thread). Nun möchte ich, dass wenn das Untermenu aufklappt und ich einen dieser unterpunkte anwähle - seitlich noch ein weiteres Untermenu entsteht ( Im Code sind das die „1“ die nach rechts rauskommen sollen). Ich habe es auf ähnliche weise wie im guide versucht, jedoch hat es nicht hingehaun. Kannst du mir helfen?
Sorry wenn ich noch mal fragen muss, aber jetzt ist der code zwar korrekt! Aber ich habe keinen schimmer wie ich das 2. untermenu rechts neben das erste bekomme :-(. Es ist jetzt im ersten untermenu mit drin, ich habe versucht es nach links zu floaten aber das bringt nichts. Mit einem Position wecheseln an die gewünschte stelle wird dann jedoch nur der erste punkt korrekt angezeigt. Jedoch nicht alle weiteren. Kann sich vl jemand den css code anschauen und mir einen tipp geben?
Hier noch ein screenshot (in den rot markierten bereich soll das zweite untermenu → 1 und 2 im Beispiel):