2010-12-06 34 views
0

J'essaye de désactiver les fonctions show et hide de jquery pour le plugin hoverintent. Je veux le faire pour 2 raisons, le numéro un, vous pouvez contrôler combien de temps la souris est sur l'élément de menu avant que le sous-élément apparaît, et le numéro 2, il arrête plusieurs instances de construire. J'ai essayé depuis hier soir de changer mon code, mais je ne suis pas en train de faire fonctionner ça ... ci-dessous est mon jquery et html d'origine, toute aide serait grandement appréciée. Merci a tous!!!Désactiver show/hide pour hoverintent pour une meilleure convivialité avec Dropdown Divs, problèmes de changement de code

Site Web avec Menu déroulant

http://www.nestudiosonline.com/test.php

Jquery

$(document).ready(function() { 
    // shows the hidden div in the list 
    $('#dave').mouseover(function() { 
     $('#aboutdke').show('200'); 

    }); 
    // hides the hide the div again for that list item 
    $('#dave').mouseleave(function() { 
     $('#aboutdke').hide(); 

    }); }); 

html

<ul id="menu"> 
     <li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li> 
     <li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a> <div id="aboutdke">div content </div></li> 
     <li class="megamenu"><a class="links" href="#">ALUMNI</a></li> 
     <li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li> 
     <li class="megamenu"><a class="links" href="#">EVENTS</a></li> 
     <li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li> 
     <li class="megamenu"><a class="links" href="#">SHOP DKE</a></li> 
     </ul> 

Répondre

0

je l'ai fait youpi ... c'est la plus simple solution de jquery faire un drop div basique avec le plugin hoverintent, mon html n'a pas eu à changer du tout, montrer mon mal aussi .... observer css

<script type="text/javascript" charset="utf-8"> 
//<![CDATA[ 
    $(document).ready(function() { 
//add hovering class to li's inside of the unordermened with the id menu  
     function addMega(){ 
     $(this).addClass("hovering"); 
     } 
//remove hovering class to li's inside of the unordermened with the id menu 
     function removeMega(){ 
     $(this).removeClass("hovering"); 
     } 
//configuariton for hoverintent plugin, hoveron time, mouse sensitivity, hoveroff time 
    var megaConfig = { 
     interval: 300, 
     sensitivity: 4, 
     over: addMega, 
     timeout: 200, 
     out: removeMega 
    }; 
//make list items with the class megamenu have the hoverinter plugin excuted on them 
    $("li.megamenu").hoverIntent(megaConfig) 


    }); 


    //]]> 
    </script> 

CSS

ul#menu 
{ 
    display:block; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

ul# menu li 
{ 
    display:inline; 
    position: relative; 
    } 

ul#menu div { 
    display: none; 
} 

ul#menu li.mega div { 
    position: absolute; 
} 

ul#menu li.hovering div { 
    display: block; 
} 

#aboutdke 
{ 
    display:block; 
    color:#FFF; 
    text-align:left; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:10px; 
    background-color:#000; 
    margin:0; 
    padding-top:10px; 
    padding-right:10px; 
    padding-bottom:10px; 
    padding-left:10px; 
    border:0px; 
    width:910px; 
    height:280px; 
    float:left; 
    position:absolute; 
    z-index:99999; 
    top:164px; 
    left:140px; 
} 


a.links:link 
{ 
    display:block; 
    width:120px; 
    height:22px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:none; 
    text-align:center; 
    outline:none; 
    float:left; 
} 

a.links:visited 
    { 
    display:block; 
    width:120px; 
    height:22px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:none; 
    text-align:center; 
    outline:none; 
    float:left; 
    } 

/* mouse over link */ 

a.links:hover 
    { 
    display:block; 
    width:120px; 
    height:22px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:underline; 
    text-align:center; 
    outline:none; 
    background-color:#000; 
    float:left; 
    } 

/* selected link */ 

a.links:active 
    { 
    display:block; 
    width:120px; 
    height:22px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:underline; 
    text-align:center; 
    outline:none; 
    background-color:#000; 
    float:left; 
    } 

a.dkeorg:link 
{ 
    display:block; 
    width:120px; 
    height:23px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:none; 
    text-align:center; 
    outline:none; 
    float:left; 
} 

a.dkeorg:visited 
    { 
    display:block; 
    width:120px; 
    height:23px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:none; 
    text-align:center; 
    outline:none; 
    } 

/* mouse over link */ 

a.dkeorg:hover 
    { 
    display:block; 
    width:120px; 
    height:23px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:underline; 
    text-align:center; 
    outline:none; 
    float:left; 
    } 

/* selected link */ 

a.dkeorg:active 
    { 
    display:block; 
    width:120px; 
    height:23px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:underline; 
    text-align:center; 
    outline:none; 
    float:left; 
    }