[jQuery] DIV Slide bei Hover für eine Navigation

[Dustin84]

Hallo,

auf ikea.de wird beim MouseOver von "Weitere Bereiche" (rechts in der Hauptnavi) die Unternavigation von oben nach unten eingeschoben.

Das versuche ich nun gerade nachzubauen.

Ich habe hier einen Link mit der Klasse "hoversub" und schließlich den einzublendenen DIV-Container mit der id "c_sub_navigation".

Einen Anfang habe ich schon:

$(function() {
	$(".hoversub").hover(
		function () {
			$("#c_sub_navigation").animate({"top": "+=137px"}, "slow");
		}, 
		function () {
			$("#c_sub_navigation").animate({"top": "-=137px"}, "slow");
		}
	);
});

Das funktioniert soweit auch.

ABER: Jetzt wird der Subnav-Container IMMER wieder nach oben geschoben, wenn ich die Linkfläche verlasse. Das soll natürlich nicht passieren, wenn ich mit dem Mauszeiger ÜBER den Subnav-Container gehe.

Wie kann man das stoppen?

Gruß
D.

 

[Netzwerkidi]

Es gibt hier http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers einige Beispiele, die dir vielleicht weiterhelfen.

Z. B. direkt das "animated hover 2"


When the link is mouseovered, it will get thetitle attribute, store it in a variable "hoverText", and then set the <em> text content with the hoverText's value.


$(document).ready(function(){

$(".menu2 a").append("<em></em>");

$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});

});