Avatar billede dondy-kurt Nybegynder
26. august 2010 - 09:26 Der er 1 kommentar og
1 løsning

Megadrop problemer

Jeg er ved at lave en megadrop, og den fungere nu også godt. Vil bare gerne have sådan at når man står på det ene menupunkt og går over til et andet, så skal den sorte ramme forsvinde med det samme, fra den man var på før, og ikke først efter 1 sek. Men der skal stadig gå 1 sek, fra megadrop'en går væk, hvis man kører musen væk fra menuen. Nogle der kan hjælpe mig?

Jeg bruger jQuery + et plugin til det ved navn hoverIntent

Se megadrop her http://demo.dkurt.dk/frost/index2.html


KODE ---------------------------------->

$(document).ready(function() {
   
    //Fodre show() og hide() functionerne data
    $("#mainNavigation .toplevel").hoverIntent({
        sensitivity: 4,
        interval: 1, 
        over: show,   
        timeout: 1000, 
        out: hide
    });
   
    //Ændre megadrop'ens z-index og giver hover effekt på <a>
    $("#mainNavigation .toplevel").hover(function() {
        $(this).find(".mainNavMegadrop").css({'z-index' : '10'});
        $(this).find("a").css({'background' : '#000'});
    }, function() {
        $(this).find(".mainNavMegadrop").css({'z-index' : '1'});
    });
   
    //Viser megarop
    function show() {
        $(this).find(".mainNavMegadrop").animate({opacity: "show"}, 1);
    }
   
    //Skjuler megadrop og hover effekt på <a>
    function hide() {
        $(this).find(".mainNavMegadrop").animate({opacity: "hide"}, 1);
        $(this).find("a").css({'background' : 'none'});
    }
   
});

<--------------------------------------
Avatar billede dondy-kurt Nybegynder
26. august 2010 - 11:26 #1
Så fandt jeg en løsning :)

Jeg ændrede blot dette:

KODE --------------------------------->

//Ændre megadrop'ens z-index og giver hover effekt på <a>
    $("#mainNavigation .toplevel").hover(function() {
        $(this).find(".mainNavMegadrop").css({'z-index' : '10'});
        $("#mainNavigation .toplevel a").css({'background' : 'none'});
        $(this).find("a").css({'background' : '#000'});
    }, function() {
        $(this).find(".mainNavMegadrop").css({'z-index' : '1'});
    });

<--------------------------------------

Men som i kan se på sitet http://demo.dkurt.dk/frost/index2.html , så når man kører musen fra det første menu punkt og tilbage igen, så er det andet menu punkts dropdown stadig synlig, indtil at timeren er gået. Dette er fordi at når man kører musen ud fra et menu punkt, så siger koden til den at dens dropdown skal have en z-index på 1, og i dette tilfælde når man kører musen ud, får de begge en z-index på en. Hvordan kommer jeg omkring dette?
Avatar billede dondy-kurt Nybegynder
03. september 2012 - 21:37 #2
SVAR
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester