[jQuery] Panel slide bei "hover". Panel anschließen offen halten

L

/LinuX/Locutus

Grünschnabel
Hi,

ich hab da mal ein Problem bei dem ich nicht weiter komme. Hab auch schon Google dazu regelrecht gequält aber keine passende Lösung gefunden. Vielleicht weiß es ja der ein oder andere:

Hier eine Demo des Problems: http://www.pixelbash.de/wp-content/demos/navi-demo/

Ich hab eine Menüleiste mit Menüpunkten. Wenn ich da über einen der Punkte fahre soll via jQuery ein DIV ausfahren und anschließend offen bleiben wenn ich mit der Maus dort rein fahre. Erst wenn ich das Panel verlasse, soll es schließen.

Hat jemand eine Ahnung wie ich das anstellen kann?
 
Ok, also ich hab jetzt die Lösung für mein eigenes Problem gefunden.
Scheinbar verhält sich die jQuery-Funktion "hover" anders als "mouseover"/"mouseout".
Während mousout sofort anschlägt wenn man innerhalb des Flyouts andere Objekte übefährt, ist dies bei hover nicht so.

Des Rätsels-Lösung ist folgende Kombination:

PHP: 
$(document).ready(function(){

/* Wenn der Button mit der Maus berührt wird, slided das FlyOut raus */			 
$('.button').hover(function() { 
    $('#klapp').slideDown('slow');
})

/* Berührt man das ausgefahrene FlyOut dann mit der Maus muss 
im ersten Teil der Anweisung ein "show" stehen, dass das FlyOut offen hält. 
Im zweiten Teil, also quasi der "mouseout"-Teil, kommt dann ein SlideUp. 
Damit wird das FlyOut dann geschlossen*/
$('#klapp').hover(function() { 
    $('#klapp').show();
}, function(){
	$('#klapp').slideUp('slow');
})
	
	
})

Hier noch mal eine Demo: http://www.pixelbash.de/wp-content/demos/navi-demo2/
 
Zuletzt bearbeitet:
Korrekterweise würdest du #klapp einfach in .button rein stecken.

Wenn du das nicht haben willst, dann musst du bei #klapp auch noch mouseenter/mouseleave (hover) abfangen und dir in einer Variable merken, wo du gerade drin bist und ob es geschlossen werden soll.

Edit:
/LinuX/Locutus hat gesagt.:
Scheinbar verhält sich die jQuery-Funktion "hover" anders als "mouseover"/"mouseout".
Zum Vergrößern anklicken....

http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.htm
 
Hallo,

ich schreib das einfach mal in diesen Thread mit rein:
Ich benötige auch ein jQuery-Plugin oder Ähnliches (also ich habe noch keins, bin noch auf der Suche) wo Text in einer Box herausfährt.
Allerdings bei mir soll das auf Klick gehen...ich benötige das bei einer Art Überschrift und dann z.B. ein Ausklapppfeil und bei Klick kann man drunter eben noch weiteren Text ausklappen/herausfahren lassen.

Wichtig ist mir auch, dass wenn Javascript aktiviert ist, der Nutzer dann wenigstens den Text bereits ausgeklappt sieht.

Bislang konnt ich nur das finden, ist aber alles nicht 100pro das Richtige:
1. http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/
Eigentlich schon gut geeignet, aber wenn ich da nen Scriptblocker an habe, sind die ganzen Boxen/Überschriften weg.

2. http://jsfiddle.net/7Yw5x/146/
Wenn's ohne Skript offen bliebe wäre das sogar am Coolsten. Jedoch wenn ich "onclick" eingebe, ruckelt das manchmal und hüpft kurz auf und zu. Und auf hover soll's ja nicht sein.

3. http://www.1stwebdesigner.com/tutorials/slide-out-panel-css3/
Wenn das per Klick ginge, könnte es auch ne interessante Lösung sein, zumal das auch nicht skriptbasiert ist.
 
Vielen Dank für die Links...also das mit "Tinker" sieht schon sehr geeignet aus. Ich bilde mir auch ein, ich hätte vor langem mal bereits sowas gefunden, das war eine Anleitung, für ein jQuery-Plugin, wo man Textkisten in den verschiedensten Varianten auffahren lassen konnte, aber ich kann es nicht mehr finden...das könnte evtl. das gewesen sein.

Die Seite mit "mathiasbynens", da klappt bei mir leider nix ein oder aus in meinem Firfox 3.6 (ist das sehr alt, ich glaub den hab ich doch erst nur ein Jahr nicht aktualisiert)...das käme dann EIGENTLICH nicht in Frage für mich, bzw. ich muss da nochmal etwas rumprobieren.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück