Hallo zusammen! Ich habe mir ein eigenes Dropdown Skript gebastelt. Es sind drei nebeneinander liegende Icons und jeweils deren Dropdown Menü.
Im 1. Code die Details dazu was was ist.
1. Icon:
$(function() {
$("#interneLinksIcon a").mouseover(function(){ /1. Icon
$("#interneLinksIcon a").css({ opacity: 0.5 }); /Manueller Hover-Effekt über dem Icon
$("#DropwdownDreieck a").css({ opacity: 0.5 });
$('#externeLinks').hide(); /Dropdown 2. Icon ausblenden
$('#Meldungen').hide(); /Dropdown 3. Icon ausblenden
$('#interneLinksCon').delay(50).slideDown(400);
});
$("#interneLinksIcon a").mouseout(function(){
$("#interneLinksIcon a").css({ opacity: 0.9 }); /Hover-Effekt entfernen
$("#DropwdownDreieck a").css({ opacity: 1.0 });
$('#interneLinksCon').delay(200).hide(0); /Dropdown ausblenden
}); /Delay gibt dem User die Chance das Dropdown zu "berühren" bevor es
}); /durch Icon-Mouseout geschlossen wird
$('#interneLinksCon').mouseover(function() {
$('#interneLinksCon').stop(); /Dropdown Animation unterbrechen und Menü sofort anzeigen,
$('#interneLinksCon').fadeIn(0); /falls der Nutzer schneller runter scrollt als die Animation ist
$("#interneLinksIcon a").css({ opacity: 0.5 }); /Manueller Hover-Effekt über dem Icon so lange man im Menü ist
$("#DropwdownDreieck a").css({ opacity: 0.5 });
});
$('#interneLinksCon').mouseleave(function() {
$("#interneLinksIcon a").css({ opacity: 0.9 }); /Hover-Effekt entfernen
$("#DropwdownDreieck a").css({ opacity: 1.0 });
$('#interneLinksCon').fadeOut(400); /Dropdown ausblenden
return false; /fadeOut zusammen mit .stop() beim mouseover ermöglicht zurückkehren
}); /falls Dropdown verlassen eigentlich nicht gewünscht war
Alles anzeigen
2. Icon:
$(function() {
$("#externeLinksIcon a").mouseover(function(){
$("#externeLinksIcon a").css({ opacity: 0.5 });
$("#DropwdownDreieck_1 a").css({ opacity: 0.5 });
$('#Meldungen').hide();
$('#interneLinksCon').hide();
$('#externeLinks').delay(50).slideDown(400);
});
$("#externeLinksIcon a").mouseout(function(){
$("#externeLinksIcon a").css({ opacity: 0.9 });
$("#DropwdownDreieck_1 a").css({ opacity: 1.0 });
$('#externeLinks').delay(200).hide(0);
});
});
$('#externeLinks').mouseover(function() {
$('#externeLinks').stop();
$('#externeLinks').fadeIn(0);
$("#externeLinksIcon a").css({ opacity: 0.5 });
$("#DropwdownDreieck_1 a").css({ opacity: 0.5 });
});
$('#externeLinks').mouseleave(function() {
$("#externeLinksIcon a").css({ opacity: 0.9 });
$("#DropwdownDreieck_1 a").css({ opacity: 1.0 });
$('#externeLinks').fadeOut(400);
return false;
});
Alles anzeigen
3. Icon:
$(function() {
$("#Container_3 a").mouseover(function(){
$("#Container_3 a").css({ opacity: 0.5 });
$("#DropwdownDreieck_2 a").css({ opacity: 0.5 });
$('#interneLinksCon').hide();
$('#externeLinks').hide();
$('#Meldungen').delay(50).slideDown(400);
});
$("#Container_3 a").mouseout(function(){
$("#Container_3 a").css({ opacity: 1.0 });
$("#DropwdownDreieck_2 a").css({ opacity: 1.0 });
$('#Meldungen').delay(200).hide(0);
});
});
$('#Meldungen').mouseover(function() {
$('#Meldungen').stop();
$('#Meldungen').fadeIn(0);
$("#Container_3 a").css({ opacity: 0.5 });
$("#DropwdownDreieck_2 a").css({ opacity: 0.5 });
});
$('#Meldungen').mouseleave(function() {
$("#Container_3 a").css({ opacity: 1.0 });
$("#DropwdownDreieck_2 a").css({ opacity: 1.0 });
$('#Meldungen').fadeOut(400);
return false;
});
Alles anzeigen
Im Anhang noch Screens.
Mein Problem: Bei hover über das nächste Icon sollen sofort (!) die Dropdowns der anderen Menüs ausgeblendet werden. Passiert aber nicht. Es gibt teils starke Verzögerungen. Solange ich gemütlich über die Icons gehe ist alles gut. Sollte ein User aber schnell mal drüber wischen gibt es erst einmal alle drei Dropdowns die dann erst nach und nach verschwinden. Klar nur Sekündchen, max., aber schön ist das nicht.
Hatte es auch mit .stop() und danach .hide() versucht. Aber das bringt keine Beschleunigung sondern nur noch mehr Unruhe.