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;
}
精彩评论