开发者

Switching out show/hide for hoverintent for better usability with Dropdown Divs, problems changing code over

I am trying to switch out the show and hide functions of jquery for the hoverintent plugin. I want to do this for 2 reasons, number one you can control how long the mouse is over the menu item before the sub item pops up, and number 2 it stops multiple instances from buil开发者_开发问答ding up. I have been trying since last night to change my code, but I am just not getting this to work...below is my original jquery and html, any help would be greatly appreciated. Thanks ALL!!!

Web Site with Dropdown Menu

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>


I did it yay...this is the most simple jquery solution to do a basic drop div with the hoverintent plugin, my html did not have to change at all, ill show my css too....observe

<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;
    }   
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜