FadeIn - Out Effekt für Hover-Navigationsmenü (JQuery) DRINGEND!

Hallo liebe Community,

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 :confused:

muchas gracias!!

HTML-Codeausschnitt (Menü):

[CODE]

Ausklappmenu
[/CODE]

CSS:

[CODE]#menu { width: 51%; background: #fff; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu a, #menu h2 {
font: 15px/18px arial, helvetica, sans-serif;
display: block;
border-width: 1px; border-style: solid; border-color: #fff #fff #fff #fff;
margin: 0; padding: 2px 3px; }

#menu h2 { color: #FFFFFF; background: #FFFFFF; text-transform: uppercase; } 
#menu a { color: #424242; background: #ffffff; text-decoration: none;} 
#menu a:hover { color: #a00; background: #fff; }
#menu li { position: relative; }
#menu ul ul {position: absolute; top: 0; left: 100%; width: 100%; text-align:left;}
div#menu ul ul, div#menu ul li:hover ul ul { display: none;} 
div#menu ul li:hover ul, div#menu ul ul li:hover ul { display: block;}

[/CODE]

[PHP]
$(„#menu ul li a“).mouseover(function() {
$(„#menu ul li ul“).fadeIn(1000);
}[/PHP]

thx

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 :wink:

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 :slight_smile:

hi,

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>

Soweit so gut

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!!

muchas gracias!!

IE

Hey,

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… ???

Wieso machst du das denn so?

Ähnliches Problem

Hi Leute,

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?

Vielen Dank vorrab für die Hilfe

Willkommen im Forum :slight_smile:
Reicht dir auch eine CSS Variante? Denn man sollte nur dort Javascript einsetzen, wo es auch nötig ist :wink:
Tips und Tricks

Oder meinst du etwas anderes?

Wenn man das mit CSS genau so gut hinbekommt, na klar :smiley:

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 :-?

Und danke für die schnelle Antwort Gilles

Einen Link zu der Seite wäre gut, dann kann man mehr sagen…

und @Gilles: Das eine schliesst das andere ja nicht aus.

Alagheo hat mal im Tutorial geschrieben wie man solchen Menüs mit CSS erstellt. Einfach mal reinlesen http://www.html.de/tutorials/40573-css3-animiertes-css-menue-erstellen.html

Der Link von Wustersoss hat mir schon weitergeholfen :smiley: Damit kann ich jetzt erst mal weiterbasteln…

Vielen Dank für die schnellen Rückmeldungen

@Paric: die Site ist noch nicht im Netz, aber trotzdem danke

Hi Wustersoss, ich bins mal wieder :smiley:

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?

Hier mal etwas Code dazu:

[I][HTML]

  • Главная
  • продукты
  • [/HTML][/I]

    [CSS]

    #navigation
    {
    width: 1080px;
    }

    #navigation a:hover
    {
    font-weight: bold;
    text-decoration: underline;
    }

    #navigation > ul
    {
    list-style: none;
    width: 1080px;
    margin: 0 auto;
    background: url(menu-background.jpg);
    height: 25px;
    }

    #navigation ul ul li
    {
    height:0;
    overflow: hidden;
    -moz-transition: height 0.2s ease-in-out 0s;
    }

    #navigation li:hover ul li
    {
    height: 25px;
    margin-top: 0px;
    padding-top: 5px;
    background: url(menu-background.jpg);
    }

    #navigation li
    {
    float: left;
    width: 175px;
    text-align: center;
    }

    #navigation ul
    {
    list-style: none;
    position: absolute;
    z-index:2;
    }

    #navigation li ul
    {
    padding-top: 5px;
    }

    #navigation li li
    {
    float: none;
    }

    [/CSS]

    Grüße
    Hulom

Dein HTML-Code ist falsch.

[html]

Oh man, wie konnte ich das nur übersehen… :frowning: , danke für deine Zeit Threadi

Ein HTML-Validator hilft da auch weiter :wink:

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):

[ATTACH]2392.vB[/ATTACH]

Danke vielmals